tide-design-system 2.5.4 → 2.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (264) hide show
  1. package/.storybook/main.ts +2 -0
  2. package/dist/{IconAccountBalance-B9rJ09ax.js → IconAccountBalance-dARjIrfY.js} +3 -3
  3. package/dist/{IconAcute-9dHrmblT.js → IconAcute-BWwq_P2g.js} +3 -3
  4. package/dist/{IconAdd-BsJiPHYa.js → IconAdd-DtInpvF3.js} +3 -3
  5. package/dist/{IconAiDescription-fQ_B1UGe.js → IconAiDescription-C-OGiP7T.js} +3 -3
  6. package/dist/{IconAlignSpaceEven-B2UIi1ao.js → IconAlignSpaceEven-CTm_RFZr.js} +3 -3
  7. package/dist/{IconApplePay-DS6fQdV_.js → IconApplePay-BEECKvxd.js} +3 -3
  8. package/dist/{IconArrowBack-CZSCZ-Jf.js → IconArrowBack-CJYjUSAT.js} +3 -3
  9. package/dist/{IconArrowCycle-D3f38VT-.js → IconArrowCycle-B-SIKRjr.js} +3 -3
  10. package/dist/{IconArrowForward-CICM-aJ1.js → IconArrowForward-CTC_pWUJ.js} +3 -3
  11. package/dist/{IconArrowRight-CwweSeyO.js → IconArrowRight-DVgboHar.js} +3 -3
  12. package/dist/{IconArrowUp-7TI0p224.js → IconArrowUp-8yer6-rz.js} +3 -3
  13. package/dist/{IconAssignment-DQQnmJc_.js → IconAssignment-CKdgR4IZ.js} +3 -3
  14. package/dist/{IconAttachMoney-sLj77NOR.js → IconAttachMoney-BOqK4Ty3.js} +3 -3
  15. package/dist/{IconAtvAtv-bfqGL_Iq.js → IconAtvAtv-CVxNZw3x.js} +3 -3
  16. package/dist/{IconAtvDuneBuggy-CbiyQRZg.js → IconAtvDuneBuggy-ChpKK_uj.js} +3 -3
  17. package/dist/{IconAtvGoKart-BxqcGKzS.js → IconAtvGoKart-BA3-opIb.js} +3 -3
  18. package/dist/{IconAtvGolfCart-6Xwju3k6.js → IconAtvGolfCart-DIQybI94.js} +3 -3
  19. package/dist/{IconAtvSandRail-dKmA3KoG.js → IconAtvSandRail-vMg9E1B1.js} +3 -3
  20. package/dist/{IconAtvSideBySide-CVSUrX7w.js → IconAtvSideBySide-DpAgficE.js} +3 -3
  21. package/dist/{IconAtvTrailer-BB6C_WKk.js → IconAtvTrailer-DmqyaW6g.js} +3 -3
  22. package/dist/{IconAutoRenew-Bl-Obhh6.js → IconAutoRenew-PKxzoFUm.js} +3 -3
  23. package/dist/{IconAwardStar-KYYsH2ss.js → IconAwardStar-C80c-wJ9.js} +3 -3
  24. package/dist/{IconBed-BVLiRAhU.js → IconBed-D8iyGBIR.js} +3 -3
  25. package/dist/{IconBoatmartPwc-B3seLCYC.js → IconBoatmartPwc-a1AOjs7L.js} +3 -3
  26. package/dist/{IconBoatmartTrailer-BosS4Ix8.js → IconBoatmartTrailer-CprxPgWU.js} +3 -3
  27. package/dist/{IconBolt-D-BSIXex.js → IconBolt-D7tpOZMC.js} +3 -3
  28. package/dist/{IconBookmark-D3Pu86n4.js → IconBookmark-ZpQyXxtb.js} +3 -3
  29. package/dist/{IconBunkhouse-B4PaVH2y.js → IconBunkhouse-rPtR_Mct.js} +3 -3
  30. package/dist/{IconCalendarMonth-CortoSy-.js → IconCalendarMonth-CKF3HJsX.js} +3 -3
  31. package/dist/{IconCall-DRysHKSn.js → IconCall-D6EvqV8k.js} +3 -3
  32. package/dist/{IconCallQuality-BMVs2M2s.js → IconCallQuality-FekMElKo.js} +3 -3
  33. package/dist/{IconCarRental-qvIsiGfR.js → IconCarRental-Cw5T4p4_.js} +3 -3
  34. package/dist/{IconCheck-CliQNN_D.js → IconCheck-Dmmvwu7-.js} +3 -3
  35. package/dist/{IconChevronLeft-hQC1St0W.js → IconChevronLeft-BF0qcV0B.js} +3 -3
  36. package/dist/{IconChevronRight-DVYcrzWE.js → IconChevronRight-CdE3lIbm.js} +3 -3
  37. package/dist/{IconClear-COYKsp8t.js → IconClear-YX6AUd3q.js} +3 -3
  38. package/dist/{IconClose-HSRbXCDE.js → IconClose-BKDRiJCn.js} +3 -3
  39. package/dist/{IconContract-BaV1mGEr.js → IconContract-7-9lX0ZL.js} +3 -3
  40. package/dist/{IconCrash-ClWQK2fw.js → IconCrash-Cz7QujvF.js} +3 -3
  41. package/dist/IconCycleMotorcycle-B8syyXoU.cjs +2 -0
  42. package/dist/IconCycleMotorcycle-DVRTUcId.js +21 -0
  43. package/dist/IconCycleTrailer-COTSVorR.cjs +2 -0
  44. package/dist/IconCycleTrailer-Cp2Ak9pX.js +20 -0
  45. package/dist/{IconDashboardCustomize-BJEcZ-jN.js → IconDashboardCustomize-g3VnCCx1.js} +3 -3
  46. package/dist/{IconDelete-DJwergoy.js → IconDelete-Dnyl1uzD.js} +3 -3
  47. package/dist/{IconDiamond-D34wtBhd.js → IconDiamond-sAYziqWh.js} +3 -3
  48. package/dist/{IconDirectionsBoat-ByiHuypy.js → IconDirectionsBoat-D0xl5It-.js} +3 -3
  49. package/dist/{IconDomain-CXsBLm5C.js → IconDomain-as7lGUZz.js} +3 -3
  50. package/dist/{IconDraft-qSYk5cPm.js → IconDraft-BTRj5LyI.js} +3 -3
  51. package/dist/{IconEdit-CFeDlBN2.js → IconEdit-Z8QjfAFi.js} +3 -3
  52. package/dist/{IconEngine-BLi3BThi.js → IconEngine-Nq1jLYrS.js} +3 -3
  53. package/dist/{IconEngineering-DKDW6b3b.js → IconEngineering-CDeCKiuN.js} +3 -3
  54. package/dist/{IconError-BsmS7Ido.js → IconError-CHkF1F4l.js} +3 -3
  55. package/dist/{IconExpandContent-CUz-acoJ.js → IconExpandContent-BKW1v-s1.js} +3 -3
  56. package/dist/{IconExpandLess-kI04ZTDg.js → IconExpandLess-DuwH_WmO.js} +3 -3
  57. package/dist/{IconExpandMore-BpIrNsXP.js → IconExpandMore-C-Fof15e.js} +3 -3
  58. package/dist/{IconFacebook-DiMWgcSK.js → IconFacebook-94UC5eci.js} +3 -3
  59. package/dist/{IconFavorite-CDLEUDWu.js → IconFavorite-Bi2ZLSFU.js} +3 -3
  60. package/dist/{IconFavoriteFilled--f1zeXKy.js → IconFavoriteFilled-BOzK3oQt.js} +3 -3
  61. package/dist/{IconFlag-CmppikB3.js → IconFlag-D3BdWSHX.js} +3 -3
  62. package/dist/{IconFormatBold-rtvyBotR.js → IconFormatBold-ptl4C5om.js} +3 -3
  63. package/dist/{IconFormatItalic-BlcS8gnO.js → IconFormatItalic-wjYo3E6V.js} +3 -3
  64. package/dist/{IconFormatListBulleted-BbJCNSJG.js → IconFormatListBulleted-Z4H5EHHL.js} +3 -3
  65. package/dist/{IconForum-CFa_3MsA.js → IconForum-dExYXhMs.js} +3 -3
  66. package/dist/{IconGas-rD46ubiw.js → IconGas-BeL_PidJ.js} +3 -3
  67. package/dist/{IconGavel-l3k6jtN3.js → IconGavel-b699C85e.js} +3 -3
  68. package/dist/{IconGears-CaXA9HK2.js → IconGears-DY0BIt9k.js} +3 -3
  69. package/dist/{IconGlobeLocationPin-cTdYm_5A.js → IconGlobeLocationPin-PPiJIaCW.js} +3 -3
  70. package/dist/{IconGoogle-6R7roJzd.js → IconGoogle-B1k1zKq5.js} +3 -3
  71. package/dist/{IconGooglePay-XLqJKvZe.js → IconGooglePay-CnoBw2gC.js} +3 -3
  72. package/dist/{IconGrid-BoplWzPb.js → IconGrid-DPAFjLOo.js} +3 -3
  73. package/dist/{IconHandshake-CsYF9kmp.js → IconHandshake-CF0rWfIQ.js} +3 -3
  74. package/dist/{IconHandyman-CQL-qu8p.js → IconHandyman-DqbZcABm.js} +3 -3
  75. package/dist/{IconHeight-CTAQLi2I.js → IconHeight-1sxFnuqb.js} +3 -3
  76. package/dist/{IconHelp-BEzzbWr3.js → IconHelp-BfxZeVdy.js} +3 -3
  77. package/dist/{IconInfo-BACpUpXu.js → IconInfo-ZZNZK4Fs.js} +3 -3
  78. package/dist/{IconInformation-CGYah4Eo.js → IconInformation-CQc0HSVc.js} +3 -3
  79. package/dist/{IconInsertText-C5HjwAuL.js → IconInsertText-dHM33CGA.js} +3 -3
  80. package/dist/{IconInstagram-DEPxn51x.js → IconInstagram-BbTbVTQe.js} +3 -3
  81. package/dist/{IconIosShare-jNePPJBV.js → IconIosShare-fe7iyZSt.js} +3 -3
  82. package/dist/{IconLayout-CgFL9FBD.js → IconLayout-BYkhBGPm.js} +3 -3
  83. package/dist/{IconLevellingJack-rO4KepKs.js → IconLevellingJack-CuuMfb9e.js} +3 -3
  84. package/dist/{IconLinkedIn-GWoK01li.js → IconLinkedIn-iC2pYpmX.js} +3 -3
  85. package/dist/{IconLocalShipping-Bayc9OL_.js → IconLocalShipping-sAYdRn-q.js} +3 -3
  86. package/dist/{IconLock-WfiVOWPI.js → IconLock-c8yaYnyT.js} +3 -3
  87. package/dist/{IconMail-ejl1H7D9.js → IconMail-D0yowPmX.js} +3 -3
  88. package/dist/{IconMenu-FlE3z6fX.js → IconMenu-Btzwi7Bu.js} +3 -3
  89. package/dist/{IconMoneyBag-CYq7aYjH.js → IconMoneyBag-BcZCfjrN.js} +3 -3
  90. package/dist/{IconMoreHoriz-B0mCtW1_.js → IconMoreHoriz-CYiGX78Y.js} +3 -3
  91. package/dist/{IconNotifications-Bm_gSQGu.js → IconNotifications-uBv1nZZ2.js} +3 -3
  92. package/dist/{IconOdometer-COcVC_eb.js → IconOdometer-DZASryD7.js} +3 -3
  93. package/dist/{IconOpenInNew-DFieFQIk.js → IconOpenInNew-VuTM8uiR.js} +3 -3
  94. package/dist/{IconPalette-DoDIzZJO.js → IconPalette-B78tp213.js} +3 -3
  95. package/dist/{IconPaypal-CX6Z2rvX.js → IconPaypal-z7u9aPLj.js} +3 -3
  96. package/dist/{IconPerson-CK0AXlS_.js → IconPerson-DWwdRmJX.js} +3 -3
  97. package/dist/{IconPersonSearch-Da5EdDrS.js → IconPersonSearch-4ESzm5yH.js} +3 -3
  98. package/dist/{IconPhotoCamera-DZHI-Yb7.js → IconPhotoCamera-Drkhsfpi.js} +3 -3
  99. package/dist/{IconPinterest-B3UM6t9-.js → IconPinterest-BhgYE6Fc.js} +3 -3
  100. package/dist/{IconPlayArrow-CR7bXHC8.js → IconPlayArrow-ztNUkoji.js} +3 -3
  101. package/dist/{IconPolicy-CzN-v54O.js → IconPolicy-DrcQUdvI.js} +3 -3
  102. package/dist/{IconPower-C5MJihEZ.js → IconPower-BISw4q1i.js} +3 -3
  103. package/dist/{IconPowerOff-BziDMScz.js → IconPowerOff-D94o_eIX.js} +3 -3
  104. package/dist/{IconPriorityHigh-Bv-j3DaQ.js → IconPriorityHigh-DzCnK1QW.js} +3 -3
  105. package/dist/{IconRemove-Bo4RUocr.js → IconRemove-gGo2PMeX.js} +3 -3
  106. package/dist/{IconRequestQuote-BUNyScQ-.js → IconRequestQuote-CWfytYvA.js} +3 -3
  107. package/dist/{IconResetWrench-DCcBmojh.js → IconResetWrench-B0tYLDcb.js} +3 -3
  108. package/dist/{IconRoad-BGTu-WPJ.js → IconRoad-m4Orr44c.js} +3 -3
  109. package/dist/{IconRoundedCorner-DycjfuJj.js → IconRoundedCorner-CqdpAVGU.js} +3 -3
  110. package/dist/{IconRuler-Da8zNDvf.js → IconRuler-C8SSjTfX.js} +3 -3
  111. package/dist/{IconRvClassA-D2-lug19.js → IconRvClassA-CFQOw02-.js} +3 -3
  112. package/dist/{IconRvClassB-Coe3FpBI.js → IconRvClassB-p-03DBol.js} +3 -3
  113. package/dist/{IconRvClassC-DWnLqMGg.js → IconRvClassC-BP5Zzlj_.js} +3 -3
  114. package/dist/{IconRvFifthWheel-CB_mQ-tO.js → IconRvFifthWheel-BMGxt3_M.js} +3 -3
  115. package/dist/{IconRvFishHouse-Cs2fm3r1.js → IconRvFishHouse-C7iNMr-3.js} +3 -3
  116. package/dist/{IconRvParkModel-D4S_iYTG.js → IconRvParkModel-l4Rx5P9F.js} +3 -3
  117. package/dist/{IconRvPopUpCamper-CW47dgll.js → IconRvPopUpCamper-BY6aLEic.js} +3 -3
  118. package/dist/{IconRvTravelTrailer-CC48bci7.js → IconRvTravelTrailer-FstodwFk.js} +3 -3
  119. package/dist/{IconRvTruckCamper-EoEVfaJM.js → IconRvTruckCamper-lLLE86pz.js} +3 -3
  120. package/dist/{IconSailing-CPcgnYwx.js → IconSailing-svTfDLn9.js} +3 -3
  121. package/dist/{IconSchool-3Dy70s11.js → IconSchool-CUB4fiMX.js} +3 -3
  122. package/dist/{IconSearch-C8WeOYws.js → IconSearch-QZW19aza.js} +3 -3
  123. package/dist/{IconSeating-D7B47LU4.js → IconSeating-B3MAIZkv.js} +3 -3
  124. package/dist/{IconSell-B95iGdOh.js → IconSell-CG2i7EOI.js} +3 -3
  125. package/dist/{IconSensors-Ckv6BEOK.js → IconSensors-BVBTJDAv.js} +3 -3
  126. package/dist/{IconSettings-CLrLZmQs.js → IconSettings-BGJv8ylA.js} +3 -3
  127. package/dist/{IconShare-CH2w2udo.js → IconShare-DLN_ze1T.js} +3 -3
  128. package/dist/{IconShieldCheck-BBHcsJhF.js → IconShieldCheck-DwGlL83P.js} +3 -3
  129. package/dist/{IconShoppingCart-_CKPKJ12.js → IconShoppingCart-BWcDIQ0t.js} +3 -3
  130. package/dist/{IconSleeps-CTzXW2RS.js → IconSleeps-Bl1OHp_d.js} +3 -3
  131. package/dist/{IconSms-C_jULP6X.js → IconSms-DXF4Rvv5.js} +3 -3
  132. package/dist/{IconSnowflake-DYpTwl2q.js → IconSnowflake-3DOCBRxO.js} +3 -3
  133. package/dist/{IconStar-CR0UA_S9.js → IconStar-y4w1Q_Ly.js} +3 -3
  134. package/dist/{IconStarFilled-DEnQm6s8.js → IconStarFilled-h3V6lcA1.js} +3 -3
  135. package/dist/{IconStarHalf-DZqwFVlC.js → IconStarHalf-CD3Otd__.js} +3 -3
  136. package/dist/{IconSummarize-BwU7xViX.js → IconSummarize-DQAFpTrk.js} +3 -3
  137. package/dist/{IconSwapHoriz-B7Nu99ui.js → IconSwapHoriz-C3usXzhR.js} +3 -3
  138. package/dist/{IconSwapVert-D83OnTLJ.js → IconSwapVert-CODa7if1.js} +3 -3
  139. package/dist/{IconThreeDRotation-WuabFIaS.js → IconThreeDRotation-Dt-qEsTU.js} +3 -3
  140. package/dist/{IconThumbUp-DwPs1Aog.js → IconThumbUp-2aoi8Hn6.js} +3 -3
  141. package/dist/{IconTrendingDown-CKqQl7o7.js → IconTrendingDown-Cc1jUDOB.js} +3 -3
  142. package/dist/{IconTrophy-DRcIPW-F.js → IconTrophy-CWU4189G.js} +3 -3
  143. package/dist/{IconTune-CXVj1kqb.js → IconTune-PtcGFHGO.js} +3 -3
  144. package/dist/{IconTwitter-B5AwI_-2.js → IconTwitter-Q7-VmjkP.js} +3 -3
  145. package/dist/{IconUmbrella-BWmv4GFi.js → IconUmbrella-B_1l6UAu.js} +3 -3
  146. package/dist/{IconVerified-BMRocsAd.js → IconVerified-BCiRYMzp.js} +3 -3
  147. package/dist/{IconVideocam-D5eUdBxR.js → IconVideocam-TZ4vpxTp.js} +3 -3
  148. package/dist/{IconViewInAr-CvR2gh_r.js → IconViewInAr-Dn4BjPYu.js} +3 -3
  149. package/dist/{IconVisibility-BlzyaCVD.js → IconVisibility-nxEIwt29.js} +3 -3
  150. package/dist/{IconVolumeOff-DB757krU.js → IconVolumeOff-D_ASm6Jk.js} +3 -3
  151. package/dist/{IconVolumeOn-CYf77UaC.js → IconVolumeOn-CTVNBoFQ.js} +3 -3
  152. package/dist/{IconWarehouse-DIRQdX8P.js → IconWarehouse-DP-BJpYG.js} +3 -3
  153. package/dist/{IconWarning-n_GTsWOM.js → IconWarning-DcYnbH1n.js} +3 -3
  154. package/dist/{IconWater-DFV09TyV.js → IconWater-Bh1ru5aW.js} +3 -3
  155. package/dist/{IconWeight-Cq12caT_.js → IconWeight-DfxHx8iL.js} +3 -3
  156. package/dist/{IconWidth-DtPjsKm8.js → IconWidth-E4u3XnEj.js} +3 -3
  157. package/dist/{IconWorkspacePremium-_Olggt_G.js → IconWorkspacePremium-Cn2NhzIu.js} +3 -3
  158. package/dist/{IconWrench-C2MHGxho.js → IconWrench-DHpCQriM.js} +3 -3
  159. package/dist/{IconYoutube-C8cHj1uF.js → IconYoutube-DHlDGTQp.js} +3 -3
  160. package/dist/css/reset.css +2 -2
  161. package/dist/css/utilities-base.css +66 -38
  162. package/dist/css/utilities-responsive.css +424 -312
  163. package/dist/css/variables.css +5 -0
  164. package/dist/logo-aero-CkTVffxb.js +17 -0
  165. package/dist/logo-aero-Z-V0eOLB.cjs +2 -0
  166. package/dist/logo-atv-BC9pKXBl.js +21 -0
  167. package/dist/logo-atv-xQMzut2h.cjs +2 -0
  168. package/dist/logo-boatmart-B9upxiMl.cjs +2 -0
  169. package/dist/logo-boatmart-DroAqtiq.js +16 -0
  170. package/dist/logo-cycle-c9schUUY.cjs +2 -0
  171. package/dist/logo-cycle-iWCyRwSL.js +21 -0
  172. package/dist/logo-equipment-3VYa6YcW.cjs +2 -0
  173. package/dist/logo-equipment-BoqO9oqu.js +17 -0
  174. package/dist/logo-pwc-BBFWrkvE.js +21 -0
  175. package/dist/logo-pwc-DhXtaTyu.cjs +2 -0
  176. package/dist/logo-rv-BRXxuciP.cjs +2 -0
  177. package/dist/logo-rv-DzHxIw2C.js +21 -0
  178. package/dist/logo-snow-Dzpaeho2.js +17 -0
  179. package/dist/logo-snow-PVobISvF.cjs +2 -0
  180. package/dist/logo-truck-DE0J4OIJ.cjs +2 -0
  181. package/dist/logo-truck-MUfLC0tr.js +21 -0
  182. package/dist/mark-aero-CFjGMjbx.cjs +2 -0
  183. package/dist/mark-aero-D8m3JDkS.js +23 -0
  184. package/dist/mark-atv-1Vppojls.js +19 -0
  185. package/dist/mark-atv-BhRn5mUA.cjs +2 -0
  186. package/dist/mark-boatmart-Bmkv3dOs.cjs +2 -0
  187. package/dist/mark-boatmart-b77RvD0c.js +16 -0
  188. package/dist/mark-cycle-BFxZOD4K.js +23 -0
  189. package/dist/mark-cycle-QCLSEZTF.cjs +2 -0
  190. package/dist/mark-equipment-BbnRZ0vl.js +19 -0
  191. package/dist/mark-equipment-ThuZOvf6.cjs +2 -0
  192. package/dist/mark-pwc-CQWDRntw.cjs +2 -0
  193. package/dist/mark-pwc-CQa98Z9S.js +21 -0
  194. package/dist/mark-rv-BtQWH4-a.cjs +2 -0
  195. package/dist/mark-rv-DY1wwuIO.js +21 -0
  196. package/dist/mark-snow-BEUxteW6.js +23 -0
  197. package/dist/mark-snow-Bek2T8IY.cjs +2 -0
  198. package/dist/mark-truck-BsOOC6Lx.cjs +2 -0
  199. package/dist/mark-truck-CUaX6FYM.js +19 -0
  200. package/dist/style.css +1 -1
  201. package/dist/tide-design-system.cjs +2 -2
  202. package/dist/tide-design-system.esm.d.ts +0 -2031
  203. package/dist/tide-design-system.esm.js +1607 -1348
  204. package/dist/utilities/realm.ts +17 -0
  205. package/dist/utilities/viewport.ts +2 -2
  206. package/docs/toast.md +61 -0
  207. package/index.ts +12 -1
  208. package/package.json +3 -3
  209. package/src/assets/css/reset.css +2 -2
  210. package/src/assets/css/utilities-base.css +66 -38
  211. package/src/assets/css/utilities-responsive.css +424 -312
  212. package/src/assets/css/variables.css +5 -0
  213. package/src/assets/svg/branding/logo/logo-aero.svg +9 -0
  214. package/src/assets/svg/branding/logo/logo-atv.svg +3 -0
  215. package/src/assets/svg/branding/logo/logo-boatmart.svg +18 -0
  216. package/src/assets/svg/branding/logo/logo-cycle.svg +3 -0
  217. package/src/assets/svg/branding/logo/logo-equipment.svg +11 -0
  218. package/src/assets/svg/branding/logo/logo-pwc.svg +3 -0
  219. package/src/assets/svg/branding/logo/logo-rv.svg +3 -0
  220. package/src/assets/svg/branding/logo/logo-snow.svg +12 -0
  221. package/src/assets/svg/branding/logo/logo-truck.svg +3 -0
  222. package/src/assets/svg/branding/mark/mark-aero.svg +4 -0
  223. package/src/assets/svg/branding/mark/mark-atv.svg +3 -0
  224. package/src/assets/svg/branding/mark/mark-boatmart.svg +17 -0
  225. package/src/assets/svg/branding/mark/mark-cycle.svg +4 -0
  226. package/src/assets/svg/branding/mark/mark-equipment.svg +3 -0
  227. package/src/assets/svg/branding/mark/mark-pwc.svg +3 -0
  228. package/src/assets/svg/branding/mark/mark-rv.svg +3 -0
  229. package/src/assets/svg/branding/mark/mark-snow.svg +4 -0
  230. package/src/assets/svg/branding/mark/mark-truck.svg +3 -0
  231. package/src/assets/svg/icons/realm/cycle/IconCycleMotorcycle.svg +4 -0
  232. package/src/assets/svg/icons/realm/cycle/IconCycleTrailer.svg +3 -0
  233. package/src/components/TideAccordionItem.vue +38 -4
  234. package/src/components/TideAlert.vue +3 -3
  235. package/src/components/TideButton.vue +36 -16
  236. package/src/components/TideButtonIcon.vue +26 -9
  237. package/src/components/TideChipAction.vue +23 -2
  238. package/src/components/TideIcon.vue +8 -6
  239. package/src/components/TideInputSelect.vue +107 -47
  240. package/src/components/TideModal.vue +14 -2
  241. package/src/components/TideRealmLogo.vue +71 -0
  242. package/src/components/TideSheet.vue +11 -2
  243. package/src/components/TideTabs.vue +4 -9
  244. package/src/components/TideToaster.vue +88 -0
  245. package/src/composables/useTideToaster.ts +63 -0
  246. package/src/stories/TideAccordionItem.stories.ts +4 -4
  247. package/src/stories/TideButton.stories.ts +9 -9
  248. package/src/stories/TideButtonIcon.stories.ts +9 -7
  249. package/src/stories/TideChipAction.stories.ts +10 -4
  250. package/src/stories/TideImageBackground.stories.ts +2 -1
  251. package/src/stories/TideInputSelect.stories.ts +18 -9
  252. package/src/stories/TideModal.stories.ts +0 -4
  253. package/src/stories/TideRealmLogo.stories.ts +25 -0
  254. package/src/stories/TideSheet.stories.ts +0 -1
  255. package/src/stories/TideToaster.stories.ts +117 -0
  256. package/src/types/Icon.ts +4 -0
  257. package/src/types/RealmLogo.ts +38 -0
  258. package/src/types/Styles.ts +2 -1
  259. package/src/types/Toast.ts +21 -0
  260. package/src/utilities/realm.ts +17 -0
  261. package/src/utilities/viewport.ts +2 -2
  262. package/tests/TideRealmLogo.spec.ts +58 -0
  263. package/tsconfig.json +18 -5
  264. package/tsconfig.node.json +7 -0
package/dist/css/utilities-responsive.css CHANGED
@@ -247,6 +247,10 @@
247
247
  .sm-tide-width-auto {width: auto;}
248
248
  .sm-tide-width-0 {width: 0;}
249
249
  .sm-tide-width-full {width: 100%;}
250
+ .sm-tide-width-stretch {
251
+ width: -webkit-fill-available;
252
+ width: stretch;
253
+ }
250
254
 
251
255
  .sm-tide-height-auto {height: auto;}
252
256
  .sm-tide-height-0 {height: 0;}
@@ -295,24 +299,24 @@
295
299
  .sm-tide-transparent-400 {background-color: var(--tide-transparent-400);}
296
300
 
297
301
  /* Typographic roles */
298
- .sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
299
- .sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
300
- .sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
301
- .sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
302
- .sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
303
- .sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
304
- .sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
305
- .sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
306
- .sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
307
- .sm-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
308
- .sm-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
309
- .sm-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
310
- .sm-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
311
- .sm-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
312
- .sm-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
313
- .sm-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
314
- .sm-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
315
- .sm-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
302
+ .sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
303
+ .sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
304
+ .sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
305
+ .sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
306
+ .sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
307
+ .sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
308
+ .sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
309
+ .sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
310
+ .sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
311
+ .sm-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
312
+ .sm-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
313
+ .sm-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
314
+ .sm-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
315
+ .sm-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
316
+ .sm-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
317
+ .sm-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
318
+ .sm-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
319
+ .sm-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
316
320
 
317
321
  /* Font Color */
318
322
  .sm-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -360,9 +364,9 @@
360
364
  .sm-tide-font-32 {font-size: var(--tide-font-32);}
361
365
 
362
366
  /* Font Weight */
363
- .sm-tide-font-400 {font-weight: 400;}
364
- .sm-tide-font-500 {font-weight: 500;}
365
- .sm-tide-font-600 {font-weight: 600;}
367
+ .sm-tide-font-400 {font-weight: var(--tide-font-regular);}
368
+ .sm-tide-font-500 {font-weight: var(--tide-font-medium);}
369
+ .sm-tide-font-600 {font-weight: var(--tide-font-semibold);}
366
370
  .sm-tide-font-700 {font-weight: 700;}
367
371
 
368
372
  /* Misc */
@@ -478,63 +482,87 @@
478
482
 
479
483
  /* Buttons */
480
484
  /* Rest State */
481
- .sm-tide-button-primary {
482
- background: var(--tide-primary);
483
- border: 2px solid var(--tide-primary);
484
- color: var(--tide-on-primary);
485
- }
486
-
487
- .sm-tide-button-secondary {
488
- background: var(--tide-surface);
489
- border: 2px solid var(--tide-primary);
490
- color: var(--tide-primary);
491
- }
492
-
493
- .sm-tide-button-tertiary {
494
- background: var(--tide-white);
495
- border: 1px solid var(--tide-border);
496
- color: var(--tide-secondary);
497
- }
498
-
499
- .sm-tide-button-quaternary {
500
- background: var(--tide-white);
501
- color: var(--tide-secondary);
502
- }
503
-
504
- .sm-tide-button-floating {
505
- background-color: var(--tide-transparent-100);
506
- color: var(--tide-secondary);
507
- box-shadow: var(--tide-shadow-bottom);
508
- }
509
-
510
- /* Hover State */
511
- a.sm-tide-button-primary:hover,
512
- button.sm-tide-button-primary:enabled:hover {
513
- border: 2px solid var(--tide-primary);
514
- background: var(--tide-white);
515
- color: var(--tide-primary);
516
- }
517
-
518
- a.sm-tide-button-secondary:hover,
519
- button.sm-tide-button-secondary:enabled:hover {
520
- background: var(--tide-primary);
521
- color: var(--tide-on-primary);
522
- }
523
-
524
- a.sm-tide-button-tertiary:hover,
525
- button.sm-tide-button-tertiary:enabled:hover {
526
- border: 1px solid var(--tide-border-high);
527
- }
528
-
529
- a.sm-tide-button-quaternary:hover,
530
- button.sm-tide-button-quaternary:enabled:hover {
531
- background: var(--tide-surface-variant);
532
- }
533
-
534
- .sm-tide-button-floating:hover,
535
- button.sm-tide-button-floating:enabled:hover {
536
- background-color: var(--tide-white);
537
- }
485
+ .sm-tide-button-primary,
486
+ .sm-tide-button-secondary,
487
+ .sm-tide-button-tertiary,
488
+ .sm-tide-button-quaternary,
489
+ .sm-tide-button-floating {
490
+ border: var(--tide-border-width-2) solid;
491
+ }
492
+
493
+ .sm-tide-button-primary,
494
+ .sm-tide-button-secondary,
495
+ .sm-tide-button-tertiary,
496
+ .sm-tide-button-quaternary {
497
+ box-shadow: none;
498
+ }
499
+
500
+ .sm-tide-button-primary {
501
+ background-color: var(--tide-primary);
502
+ border-color: var(--tide-primary);
503
+ color: var(--tide-on-primary);
504
+ }
505
+
506
+ .sm-tide-button-secondary {
507
+ background-color: var(--tide-secondary);
508
+ border-color: var(--tide-secondary);
509
+ color: var(--tide-on-secondary);
510
+ }
511
+
512
+ .sm-tide-button-tertiary {
513
+ background-color: var(--tide-surface-variant);
514
+ border-color: var(--tide-surface-variant);
515
+ color: var(--tide-secondary);
516
+ }
517
+
518
+ .sm-tide-button-quaternary {
519
+ background-color: var(--tide-surface);
520
+ border-color: var(--tide-surface);
521
+ color: var(--tide-secondary);
522
+ }
523
+
524
+ .sm-tide-button-floating {
525
+ background-color: var(--tide-surface);
526
+ border-color: var(--tide-surface);
527
+ box-shadow: var(--tide-shadow-bottom);
528
+ color: var(--tide-secondary);
529
+ }
530
+
531
+ /* Hover State */
532
+ a.sm-tide-button-primary:hover,
533
+ button.sm-tide-button-primary:enabled:hover {
534
+ background-color: var(--tide-surface);
535
+ border-color: var(--tide-primary);
536
+ color: var(--tide-primary);
537
+ }
538
+
539
+ a.sm-tide-button-secondary:hover,
540
+ button.sm-tide-button-secondary:enabled:hover {
541
+ background-color: var(--tide-surface);
542
+ border-color: var(--tide-secondary);
543
+ color: var(--tide-on-surface);
544
+ }
545
+
546
+ a.sm-tide-button-tertiary:hover,
547
+ button.sm-tide-button-tertiary:enabled:hover {
548
+ background-color: var(--tide-surface-variant);
549
+ border-color: var(--tide-border);
550
+ color: var(--tide-secondary);
551
+ }
552
+
553
+ a.sm-tide-button-quaternary:hover,
554
+ button.sm-tide-button-quaternary:enabled:hover {
555
+ background-color: var(--tide-surface-variant);
556
+ border-color: var(--tide-surface-variant);
557
+ color: var(--tide-secondary);
558
+ }
559
+
560
+ .sm-tide-button-floating:hover,
561
+ button.sm-tide-button-floating:enabled:hover {
562
+ background-color: var(--tide-surface);
563
+ border-color: var(--tide-surface);
564
+ color: var(--tide-secondary);
565
+ }
538
566
 
539
567
  /* Disabled State */
540
568
  button.sm-tide-button-primary:disabled,
@@ -795,6 +823,10 @@
795
823
  .md-tide-width-auto {width: auto;}
796
824
  .md-tide-width-0 {width: 0;}
797
825
  .md-tide-width-full {width: 100%;}
826
+ .md-tide-width-stretch {
827
+ width: -webkit-fill-available;
828
+ width: stretch;
829
+ }
798
830
 
799
831
  .md-tide-height-auto {height: auto;}
800
832
  .md-tide-height-0 {height: 0;}
@@ -843,24 +875,24 @@
843
875
  .md-tide-transparent-400 {background-color: var(--tide-transparent-400);}
844
876
 
845
877
  /* Typographic roles */
846
- .md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
847
- .md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
848
- .md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
849
- .md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
850
- .md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
851
- .md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
852
- .md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
853
- .md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
854
- .md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
855
- .md-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
856
- .md-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
857
- .md-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
858
- .md-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
859
- .md-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
860
- .md-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
861
- .md-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
862
- .md-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
863
- .md-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
878
+ .md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
879
+ .md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
880
+ .md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
881
+ .md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
882
+ .md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
883
+ .md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
884
+ .md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
885
+ .md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
886
+ .md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
887
+ .md-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
888
+ .md-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
889
+ .md-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
890
+ .md-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
891
+ .md-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
892
+ .md-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
893
+ .md-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
894
+ .md-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
895
+ .md-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
864
896
 
865
897
  /* Font Color */
866
898
  .md-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -908,9 +940,9 @@
908
940
  .md-tide-font-32 {font-size: var(--tide-font-32);}
909
941
 
910
942
  /* Font Weight */
911
- .md-tide-font-400 {font-weight: 400;}
912
- .md-tide-font-500 {font-weight: 500;}
913
- .md-tide-font-600 {font-weight: 600;}
943
+ .md-tide-font-400 {font-weight: var(--tide-font-regular);}
944
+ .md-tide-font-500 {font-weight: var(--tide-font-medium);}
945
+ .md-tide-font-600 {font-weight: var(--tide-font-semibold);}
914
946
  .md-tide-font-700 {font-weight: 700;}
915
947
 
916
948
  /* Misc */
@@ -1026,63 +1058,87 @@
1026
1058
 
1027
1059
  /* Buttons */
1028
1060
  /* Rest State */
1029
- .md-tide-button-primary {
1030
- background: var(--tide-primary);
1031
- border: 2px solid var(--tide-primary);
1032
- color: var(--tide-on-primary);
1033
- }
1034
-
1035
- .md-tide-button-secondary {
1036
- background: var(--tide-surface);
1037
- border: 2px solid var(--tide-primary);
1038
- color: var(--tide-primary);
1039
- }
1040
-
1041
- .md-tide-button-tertiary {
1042
- background: var(--tide-white);
1043
- border: 1px solid var(--tide-border);
1044
- color: var(--tide-secondary);
1045
- }
1046
-
1047
- .md-tide-button-quaternary {
1048
- background: var(--tide-white);
1049
- color: var(--tide-secondary);
1050
- }
1051
-
1052
- .md-tide-button-floating {
1053
- background-color: var(--tide-transparent-100);
1054
- color: var(--tide-secondary);
1055
- box-shadow: var(--tide-shadow-bottom);
1056
- }
1057
-
1058
- /* Hover State */
1059
- a.md-tide-button-primary:hover,
1060
- button.md-tide-button-primary:enabled:hover {
1061
- border: 2px solid var(--tide-primary);
1062
- background: var(--tide-white);
1063
- color: var(--tide-primary);
1064
- }
1065
-
1066
- a.md-tide-button-secondary:hover,
1067
- button.md-tide-button-secondary:enabled:hover {
1068
- background: var(--tide-primary);
1069
- color: var(--tide-on-primary);
1070
- }
1071
-
1072
- a.md-tide-button-tertiary:hover,
1073
- button.md-tide-button-tertiary:enabled:hover {
1074
- border: 1px solid var(--tide-border-high);
1075
- }
1076
-
1077
- a.md-tide-button-quaternary:hover,
1078
- button.md-tide-button-quaternary:enabled:hover {
1079
- background: var(--tide-surface-variant);
1080
- }
1081
-
1082
- .md-tide-button-floating:hover,
1083
- button.md-tide-button-floating:enabled:hover {
1084
- background-color: var(--tide-white);
1085
- }
1061
+ .md-tide-button-primary,
1062
+ .md-tide-button-secondary,
1063
+ .md-tide-button-tertiary,
1064
+ .md-tide-button-quaternary,
1065
+ .md-tide-button-floating {
1066
+ border: var(--tide-border-width-2) solid;
1067
+ }
1068
+
1069
+ .md-tide-button-primary,
1070
+ .md-tide-button-secondary,
1071
+ .md-tide-button-tertiary,
1072
+ .md-tide-button-quaternary {
1073
+ box-shadow: none;
1074
+ }
1075
+
1076
+ .md-tide-button-primary {
1077
+ background-color: var(--tide-primary);
1078
+ border-color: var(--tide-primary);
1079
+ color: var(--tide-on-primary);
1080
+ }
1081
+
1082
+ .md-tide-button-secondary {
1083
+ background-color: var(--tide-secondary);
1084
+ border-color: var(--tide-secondary);
1085
+ color: var(--tide-on-secondary);
1086
+ }
1087
+
1088
+ .md-tide-button-tertiary {
1089
+ background-color: var(--tide-surface-variant);
1090
+ border-color: var(--tide-surface-variant);
1091
+ color: var(--tide-secondary);
1092
+ }
1093
+
1094
+ .md-tide-button-quaternary {
1095
+ background-color: var(--tide-surface);
1096
+ border-color: var(--tide-surface);
1097
+ color: var(--tide-secondary);
1098
+ }
1099
+
1100
+ .md-tide-button-floating {
1101
+ background-color: var(--tide-surface);
1102
+ border-color: var(--tide-surface);
1103
+ box-shadow: var(--tide-shadow-bottom);
1104
+ color: var(--tide-secondary);
1105
+ }
1106
+
1107
+ /* Hover State */
1108
+ a.md-tide-button-primary:hover,
1109
+ button.md-tide-button-primary:enabled:hover {
1110
+ background-color: var(--tide-surface);
1111
+ border-color: var(--tide-primary);
1112
+ color: var(--tide-primary);
1113
+ }
1114
+
1115
+ a.md-tide-button-secondary:hover,
1116
+ button.md-tide-button-secondary:enabled:hover {
1117
+ background-color: var(--tide-surface);
1118
+ border-color: var(--tide-secondary);
1119
+ color: var(--tide-on-surface);
1120
+ }
1121
+
1122
+ a.md-tide-button-tertiary:hover,
1123
+ button.md-tide-button-tertiary:enabled:hover {
1124
+ background-color: var(--tide-surface-variant);
1125
+ border-color: var(--tide-border);
1126
+ color: var(--tide-secondary);
1127
+ }
1128
+
1129
+ a.md-tide-button-quaternary:hover,
1130
+ button.md-tide-button-quaternary:enabled:hover {
1131
+ background-color: var(--tide-surface-variant);
1132
+ border-color: var(--tide-surface-variant);
1133
+ color: var(--tide-secondary);
1134
+ }
1135
+
1136
+ .md-tide-button-floating:hover,
1137
+ button.md-tide-button-floating:enabled:hover {
1138
+ background-color: var(--tide-surface);
1139
+ border-color: var(--tide-surface);
1140
+ color: var(--tide-secondary);
1141
+ }
1086
1142
 
1087
1143
  /* Disabled State */
1088
1144
  button.md-tide-button-primary:disabled,
@@ -1343,6 +1399,10 @@
1343
1399
  .lg-tide-width-auto {width: auto;}
1344
1400
  .lg-tide-width-0 {width: 0;}
1345
1401
  .lg-tide-width-full {width: 100%;}
1402
+ .lg-tide-width-stretch {
1403
+ width: -webkit-fill-available;
1404
+ width: stretch;
1405
+ }
1346
1406
 
1347
1407
  .lg-tide-height-auto {height: auto;}
1348
1408
  .lg-tide-height-0 {height: 0;}
@@ -1391,24 +1451,24 @@
1391
1451
  .lg-tide-transparent-400 {background-color: var(--tide-transparent-400);}
1392
1452
 
1393
1453
  /* Typographic roles */
1394
- .lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
1395
- .lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
1396
- .lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
1397
- .lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
1398
- .lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
1399
- .lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
1400
- .lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
1401
- .lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
1402
- .lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
1403
- .lg-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
1404
- .lg-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
1405
- .lg-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
1406
- .lg-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
1407
- .lg-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
1408
- .lg-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
1409
- .lg-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
1410
- .lg-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
1411
- .lg-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
1454
+ .lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1455
+ .lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1456
+ .lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1457
+ .lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1458
+ .lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1459
+ .lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1460
+ .lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
1461
+ .lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
1462
+ .lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
1463
+ .lg-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
1464
+ .lg-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
1465
+ .lg-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
1466
+ .lg-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
1467
+ .lg-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
1468
+ .lg-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
1469
+ .lg-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
1470
+ .lg-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
1471
+ .lg-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
1412
1472
 
1413
1473
  /* Font Color */
1414
1474
  .lg-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -1456,9 +1516,9 @@
1456
1516
  .lg-tide-font-32 {font-size: var(--tide-font-32);}
1457
1517
 
1458
1518
  /* Font Weight */
1459
- .lg-tide-font-400 {font-weight: 400;}
1460
- .lg-tide-font-500 {font-weight: 500;}
1461
- .lg-tide-font-600 {font-weight: 600;}
1519
+ .lg-tide-font-400 {font-weight: var(--tide-font-regular);}
1520
+ .lg-tide-font-500 {font-weight: var(--tide-font-medium);}
1521
+ .lg-tide-font-600 {font-weight: var(--tide-font-semibold);}
1462
1522
  .lg-tide-font-700 {font-weight: 700;}
1463
1523
 
1464
1524
  /* Misc */
@@ -1574,63 +1634,87 @@
1574
1634
 
1575
1635
  /* Buttons */
1576
1636
  /* Rest State */
1577
- .lg-tide-button-primary {
1578
- background: var(--tide-primary);
1579
- border: 2px solid var(--tide-primary);
1580
- color: var(--tide-on-primary);
1581
- }
1582
-
1583
- .lg-tide-button-secondary {
1584
- background: var(--tide-surface);
1585
- border: 2px solid var(--tide-primary);
1586
- color: var(--tide-primary);
1587
- }
1588
-
1589
- .lg-tide-button-tertiary {
1590
- background: var(--tide-white);
1591
- border: 1px solid var(--tide-border);
1592
- color: var(--tide-secondary);
1593
- }
1594
-
1595
- .lg-tide-button-quaternary {
1596
- background: var(--tide-white);
1597
- color: var(--tide-secondary);
1598
- }
1599
-
1600
- .lg-tide-button-floating {
1601
- background-color: var(--tide-transparent-100);
1602
- color: var(--tide-secondary);
1603
- box-shadow: var(--tide-shadow-bottom);
1604
- }
1605
-
1606
- /* Hover State */
1607
- a.lg-tide-button-primary:hover,
1608
- button.lg-tide-button-primary:enabled:hover {
1609
- border: 2px solid var(--tide-primary);
1610
- background: var(--tide-white);
1611
- color: var(--tide-primary);
1612
- }
1613
-
1614
- a.lg-tide-button-secondary:hover,
1615
- button.lg-tide-button-secondary:enabled:hover {
1616
- background: var(--tide-primary);
1617
- color: var(--tide-on-primary);
1618
- }
1619
-
1620
- a.lg-tide-button-tertiary:hover,
1621
- button.lg-tide-button-tertiary:enabled:hover {
1622
- border: 1px solid var(--tide-border-high);
1623
- }
1624
-
1625
- a.lg-tide-button-quaternary:hover,
1626
- button.lg-tide-button-quaternary:enabled:hover {
1627
- background: var(--tide-surface-variant);
1628
- }
1629
-
1630
- .lg-tide-button-floating:hover,
1631
- button.lg-tide-button-floating:enabled:hover {
1632
- background-color: var(--tide-white);
1633
- }
1637
+ .lg-tide-button-primary,
1638
+ .lg-tide-button-secondary,
1639
+ .lg-tide-button-tertiary,
1640
+ .lg-tide-button-quaternary,
1641
+ .lg-tide-button-floating {
1642
+ border: var(--tide-border-width-2) solid;
1643
+ }
1644
+
1645
+ .lg-tide-button-primary,
1646
+ .lg-tide-button-secondary,
1647
+ .lg-tide-button-tertiary,
1648
+ .lg-tide-button-quaternary {
1649
+ box-shadow: none;
1650
+ }
1651
+
1652
+ .lg-tide-button-primary {
1653
+ background-color: var(--tide-primary);
1654
+ border-color: var(--tide-primary);
1655
+ color: var(--tide-on-primary);
1656
+ }
1657
+
1658
+ .lg-tide-button-secondary {
1659
+ background-color: var(--tide-secondary);
1660
+ border-color: var(--tide-secondary);
1661
+ color: var(--tide-on-secondary);
1662
+ }
1663
+
1664
+ .lg-tide-button-tertiary {
1665
+ background-color: var(--tide-surface-variant);
1666
+ border-color: var(--tide-surface-variant);
1667
+ color: var(--tide-secondary);
1668
+ }
1669
+
1670
+ .lg-tide-button-quaternary {
1671
+ background-color: var(--tide-surface);
1672
+ border-color: var(--tide-surface);
1673
+ color: var(--tide-secondary);
1674
+ }
1675
+
1676
+ .lg-tide-button-floating {
1677
+ background-color: var(--tide-surface);
1678
+ border-color: var(--tide-surface);
1679
+ box-shadow: var(--tide-shadow-bottom);
1680
+ color: var(--tide-secondary);
1681
+ }
1682
+
1683
+ /* Hover State */
1684
+ a.lg-tide-button-primary:hover,
1685
+ button.lg-tide-button-primary:enabled:hover {
1686
+ background-color: var(--tide-surface);
1687
+ border-color: var(--tide-primary);
1688
+ color: var(--tide-primary);
1689
+ }
1690
+
1691
+ a.lg-tide-button-secondary:hover,
1692
+ button.lg-tide-button-secondary:enabled:hover {
1693
+ background-color: var(--tide-surface);
1694
+ border-color: var(--tide-secondary);
1695
+ color: var(--tide-on-surface);
1696
+ }
1697
+
1698
+ a.lg-tide-button-tertiary:hover,
1699
+ button.lg-tide-button-tertiary:enabled:hover {
1700
+ background-color: var(--tide-surface-variant);
1701
+ border-color: var(--tide-border);
1702
+ color: var(--tide-secondary);
1703
+ }
1704
+
1705
+ a.lg-tide-button-quaternary:hover,
1706
+ button.lg-tide-button-quaternary:enabled:hover {
1707
+ background-color: var(--tide-surface-variant);
1708
+ border-color: var(--tide-surface-variant);
1709
+ color: var(--tide-secondary);
1710
+ }
1711
+
1712
+ .lg-tide-button-floating:hover,
1713
+ button.lg-tide-button-floating:enabled:hover {
1714
+ background-color: var(--tide-surface);
1715
+ border-color: var(--tide-surface);
1716
+ color: var(--tide-secondary);
1717
+ }
1634
1718
 
1635
1719
  /* Disabled State */
1636
1720
  button.lg-tide-button-primary:disabled,
@@ -1891,6 +1975,10 @@
1891
1975
  .xl-tide-width-auto {width: auto;}
1892
1976
  .xl-tide-width-0 {width: 0;}
1893
1977
  .xl-tide-width-full {width: 100%;}
1978
+ .xl-tide-width-stretch {
1979
+ width: -webkit-fill-available;
1980
+ width: stretch;
1981
+ }
1894
1982
 
1895
1983
  .xl-tide-height-auto {height: auto;}
1896
1984
  .xl-tide-height-0 {height: 0;}
@@ -1939,24 +2027,24 @@
1939
2027
  .xl-tide-transparent-400 {background-color: var(--tide-transparent-400);}
1940
2028
 
1941
2029
  /* Typographic roles */
1942
- .xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
1943
- .xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
1944
- .xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
1945
- .xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
1946
- .xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
1947
- .xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
1948
- .xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
1949
- .xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
1950
- .xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
1951
- .xl-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
1952
- .xl-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
1953
- .xl-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
1954
- .xl-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
1955
- .xl-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
1956
- .xl-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
1957
- .xl-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
1958
- .xl-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
1959
- .xl-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
2030
+ .xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2031
+ .xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2032
+ .xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2033
+ .xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2034
+ .xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2035
+ .xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2036
+ .xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
2037
+ .xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
2038
+ .xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
2039
+ .xl-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
2040
+ .xl-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
2041
+ .xl-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
2042
+ .xl-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
2043
+ .xl-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
2044
+ .xl-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
2045
+ .xl-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
2046
+ .xl-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
2047
+ .xl-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
1960
2048
 
1961
2049
  /* Font Color */
1962
2050
  .xl-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -2004,9 +2092,9 @@
2004
2092
  .xl-tide-font-32 {font-size: var(--tide-font-32);}
2005
2093
 
2006
2094
  /* Font Weight */
2007
- .xl-tide-font-400 {font-weight: 400;}
2008
- .xl-tide-font-500 {font-weight: 500;}
2009
- .xl-tide-font-600 {font-weight: 600;}
2095
+ .xl-tide-font-400 {font-weight: var(--tide-font-regular);}
2096
+ .xl-tide-font-500 {font-weight: var(--tide-font-medium);}
2097
+ .xl-tide-font-600 {font-weight: var(--tide-font-semibold);}
2010
2098
  .xl-tide-font-700 {font-weight: 700;}
2011
2099
 
2012
2100
  /* Misc */
@@ -2122,63 +2210,87 @@
2122
2210
 
2123
2211
  /* Buttons */
2124
2212
  /* Rest State */
2125
- .xl-tide-button-primary {
2126
- background: var(--tide-primary);
2127
- border: 2px solid var(--tide-primary);
2128
- color: var(--tide-on-primary);
2129
- }
2130
-
2131
- .xl-tide-button-secondary {
2132
- background: var(--tide-surface);
2133
- border: 2px solid var(--tide-primary);
2134
- color: var(--tide-primary);
2135
- }
2136
-
2137
- .xl-tide-button-tertiary {
2138
- background: var(--tide-white);
2139
- border: 1px solid var(--tide-border);
2140
- color: var(--tide-secondary);
2141
- }
2142
-
2143
- .xl-tide-button-quaternary {
2144
- background: var(--tide-white);
2145
- color: var(--tide-secondary);
2146
- }
2147
-
2148
- .xl-tide-button-floating {
2149
- background-color: var(--tide-transparent-100);
2150
- color: var(--tide-secondary);
2151
- box-shadow: var(--tide-shadow-bottom);
2152
- }
2153
-
2154
- /* Hover State */
2155
- a.xl-tide-button-primary:hover,
2156
- button.xl-tide-button-primary:enabled:hover {
2157
- border: 2px solid var(--tide-primary);
2158
- background: var(--tide-white);
2159
- color: var(--tide-primary);
2160
- }
2161
-
2162
- a.xl-tide-button-secondary:hover,
2163
- button.xl-tide-button-secondary:enabled:hover {
2164
- background: var(--tide-primary);
2165
- color: var(--tide-on-primary);
2166
- }
2167
-
2168
- a.xl-tide-button-tertiary:hover,
2169
- button.xl-tide-button-tertiary:enabled:hover {
2170
- border: 1px solid var(--tide-border-high);
2171
- }
2172
-
2173
- a.xl-tide-button-quaternary:hover,
2174
- button.xl-tide-button-quaternary:enabled:hover {
2175
- background: var(--tide-surface-variant);
2176
- }
2177
-
2178
- .xl-tide-button-floating:hover,
2179
- button.xl-tide-button-floating:enabled:hover {
2180
- background-color: var(--tide-white);
2181
- }
2213
+ .xl-tide-button-primary,
2214
+ .xl-tide-button-secondary,
2215
+ .xl-tide-button-tertiary,
2216
+ .xl-tide-button-quaternary,
2217
+ .xl-tide-button-floating {
2218
+ border: var(--tide-border-width-2) solid;
2219
+ }
2220
+
2221
+ .xl-tide-button-primary,
2222
+ .xl-tide-button-secondary,
2223
+ .xl-tide-button-tertiary,
2224
+ .xl-tide-button-quaternary {
2225
+ box-shadow: none;
2226
+ }
2227
+
2228
+ .xl-tide-button-primary {
2229
+ background-color: var(--tide-primary);
2230
+ border-color: var(--tide-primary);
2231
+ color: var(--tide-on-primary);
2232
+ }
2233
+
2234
+ .xl-tide-button-secondary {
2235
+ background-color: var(--tide-secondary);
2236
+ border-color: var(--tide-secondary);
2237
+ color: var(--tide-on-secondary);
2238
+ }
2239
+
2240
+ .xl-tide-button-tertiary {
2241
+ background-color: var(--tide-surface-variant);
2242
+ border-color: var(--tide-surface-variant);
2243
+ color: var(--tide-secondary);
2244
+ }
2245
+
2246
+ .xl-tide-button-quaternary {
2247
+ background-color: var(--tide-surface);
2248
+ border-color: var(--tide-surface);
2249
+ color: var(--tide-secondary);
2250
+ }
2251
+
2252
+ .xl-tide-button-floating {
2253
+ background-color: var(--tide-surface);
2254
+ border-color: var(--tide-surface);
2255
+ box-shadow: var(--tide-shadow-bottom);
2256
+ color: var(--tide-secondary);
2257
+ }
2258
+
2259
+ /* Hover State */
2260
+ a.xl-tide-button-primary:hover,
2261
+ button.xl-tide-button-primary:enabled:hover {
2262
+ background-color: var(--tide-surface);
2263
+ border-color: var(--tide-primary);
2264
+ color: var(--tide-primary);
2265
+ }
2266
+
2267
+ a.xl-tide-button-secondary:hover,
2268
+ button.xl-tide-button-secondary:enabled:hover {
2269
+ background-color: var(--tide-surface);
2270
+ border-color: var(--tide-secondary);
2271
+ color: var(--tide-on-surface);
2272
+ }
2273
+
2274
+ a.xl-tide-button-tertiary:hover,
2275
+ button.xl-tide-button-tertiary:enabled:hover {
2276
+ background-color: var(--tide-surface-variant);
2277
+ border-color: var(--tide-border);
2278
+ color: var(--tide-secondary);
2279
+ }
2280
+
2281
+ a.xl-tide-button-quaternary:hover,
2282
+ button.xl-tide-button-quaternary:enabled:hover {
2283
+ background-color: var(--tide-surface-variant);
2284
+ border-color: var(--tide-surface-variant);
2285
+ color: var(--tide-secondary);
2286
+ }
2287
+
2288
+ .xl-tide-button-floating:hover,
2289
+ button.xl-tide-button-floating:enabled:hover {
2290
+ background-color: var(--tide-surface);
2291
+ border-color: var(--tide-surface);
2292
+ color: var(--tide-secondary);
2293
+ }
2182
2294
 
2183
2295
  /* Disabled State */
2184
2296
  button.xl-tide-button-primary:disabled,