tide-design-system 2.5.4 → 2.5.7

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 (246) hide show
  1. package/.storybook/main.ts +1 -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/IconCalculate-Bbp4hHOW.js +16 -0
  31. package/dist/IconCalculate-CGwDSRuU.cjs +2 -0
  32. package/dist/{IconCalendarMonth-CortoSy-.js → IconCalendarMonth-CKF3HJsX.js} +3 -3
  33. package/dist/{IconCall-DRysHKSn.js → IconCall-D6EvqV8k.js} +3 -3
  34. package/dist/{IconCallQuality-BMVs2M2s.js → IconCallQuality-FekMElKo.js} +3 -3
  35. package/dist/{IconCarRental-qvIsiGfR.js → IconCarRental-Cw5T4p4_.js} +3 -3
  36. package/dist/{IconCheck-CliQNN_D.js → IconCheck-Dmmvwu7-.js} +3 -3
  37. package/dist/{IconChevronLeft-hQC1St0W.js → IconChevronLeft-BF0qcV0B.js} +3 -3
  38. package/dist/{IconChevronRight-DVYcrzWE.js → IconChevronRight-CdE3lIbm.js} +3 -3
  39. package/dist/{IconClear-COYKsp8t.js → IconClear-YX6AUd3q.js} +3 -3
  40. package/dist/{IconClose-HSRbXCDE.js → IconClose-BKDRiJCn.js} +3 -3
  41. package/dist/{IconContract-BaV1mGEr.js → IconContract-7-9lX0ZL.js} +3 -3
  42. package/dist/{IconCrash-ClWQK2fw.js → IconCrash-Cz7QujvF.js} +3 -3
  43. package/dist/IconCycleMotorcycle-B8syyXoU.cjs +2 -0
  44. package/dist/IconCycleMotorcycle-DVRTUcId.js +21 -0
  45. package/dist/IconCycleTrailer-COTSVorR.cjs +2 -0
  46. package/dist/IconCycleTrailer-Cp2Ak9pX.js +20 -0
  47. package/dist/{IconDashboardCustomize-BJEcZ-jN.js → IconDashboardCustomize-g3VnCCx1.js} +3 -3
  48. package/dist/{IconDelete-DJwergoy.js → IconDelete-Dnyl1uzD.js} +3 -3
  49. package/dist/{IconDiamond-D34wtBhd.js → IconDiamond-sAYziqWh.js} +3 -3
  50. package/dist/{IconDirectionsBoat-ByiHuypy.js → IconDirectionsBoat-D0xl5It-.js} +3 -3
  51. package/dist/{IconDomain-CXsBLm5C.js → IconDomain-as7lGUZz.js} +3 -3
  52. package/dist/{IconDraft-qSYk5cPm.js → IconDraft-BTRj5LyI.js} +3 -3
  53. package/dist/{IconEdit-CFeDlBN2.js → IconEdit-Z8QjfAFi.js} +3 -3
  54. package/dist/{IconEngine-BLi3BThi.js → IconEngine-Nq1jLYrS.js} +3 -3
  55. package/dist/{IconEngineering-DKDW6b3b.js → IconEngineering-CDeCKiuN.js} +3 -3
  56. package/dist/{IconError-BsmS7Ido.js → IconError-CHkF1F4l.js} +3 -3
  57. package/dist/{IconExpandContent-CUz-acoJ.js → IconExpandContent-BKW1v-s1.js} +3 -3
  58. package/dist/{IconExpandLess-kI04ZTDg.js → IconExpandLess-DuwH_WmO.js} +3 -3
  59. package/dist/{IconExpandMore-BpIrNsXP.js → IconExpandMore-C-Fof15e.js} +3 -3
  60. package/dist/{IconFacebook-DiMWgcSK.js → IconFacebook-94UC5eci.js} +3 -3
  61. package/dist/{IconFavorite-CDLEUDWu.js → IconFavorite-Bi2ZLSFU.js} +3 -3
  62. package/dist/{IconFavoriteFilled--f1zeXKy.js → IconFavoriteFilled-BOzK3oQt.js} +3 -3
  63. package/dist/{IconFlag-CmppikB3.js → IconFlag-D3BdWSHX.js} +3 -3
  64. package/dist/{IconFormatBold-rtvyBotR.js → IconFormatBold-ptl4C5om.js} +3 -3
  65. package/dist/{IconFormatItalic-BlcS8gnO.js → IconFormatItalic-wjYo3E6V.js} +3 -3
  66. package/dist/{IconFormatListBulleted-BbJCNSJG.js → IconFormatListBulleted-Z4H5EHHL.js} +3 -3
  67. package/dist/{IconForum-CFa_3MsA.js → IconForum-dExYXhMs.js} +3 -3
  68. package/dist/{IconGas-rD46ubiw.js → IconGas-BeL_PidJ.js} +3 -3
  69. package/dist/{IconGavel-l3k6jtN3.js → IconGavel-b699C85e.js} +3 -3
  70. package/dist/{IconGears-CaXA9HK2.js → IconGears-DY0BIt9k.js} +3 -3
  71. package/dist/{IconGlobeLocationPin-cTdYm_5A.js → IconGlobeLocationPin-PPiJIaCW.js} +3 -3
  72. package/dist/{IconGoogle-6R7roJzd.js → IconGoogle-B1k1zKq5.js} +3 -3
  73. package/dist/{IconGooglePay-XLqJKvZe.js → IconGooglePay-CnoBw2gC.js} +3 -3
  74. package/dist/{IconGrid-BoplWzPb.js → IconGrid-DPAFjLOo.js} +3 -3
  75. package/dist/{IconHandshake-CsYF9kmp.js → IconHandshake-CF0rWfIQ.js} +3 -3
  76. package/dist/{IconHandyman-CQL-qu8p.js → IconHandyman-DqbZcABm.js} +3 -3
  77. package/dist/{IconHeight-CTAQLi2I.js → IconHeight-1sxFnuqb.js} +3 -3
  78. package/dist/{IconHelp-BEzzbWr3.js → IconHelp-BfxZeVdy.js} +3 -3
  79. package/dist/{IconInfo-BACpUpXu.js → IconInfo-ZZNZK4Fs.js} +3 -3
  80. package/dist/{IconInformation-CGYah4Eo.js → IconInformation-CQc0HSVc.js} +3 -3
  81. package/dist/{IconInsertText-C5HjwAuL.js → IconInsertText-dHM33CGA.js} +3 -3
  82. package/dist/{IconInstagram-DEPxn51x.js → IconInstagram-BbTbVTQe.js} +3 -3
  83. package/dist/{IconIosShare-jNePPJBV.js → IconIosShare-fe7iyZSt.js} +3 -3
  84. package/dist/{IconLayout-CgFL9FBD.js → IconLayout-BYkhBGPm.js} +3 -3
  85. package/dist/{IconLevellingJack-rO4KepKs.js → IconLevellingJack-CuuMfb9e.js} +3 -3
  86. package/dist/{IconLinkedIn-GWoK01li.js → IconLinkedIn-iC2pYpmX.js} +3 -3
  87. package/dist/{IconLocalShipping-Bayc9OL_.js → IconLocalShipping-sAYdRn-q.js} +3 -3
  88. package/dist/{IconLock-WfiVOWPI.js → IconLock-c8yaYnyT.js} +3 -3
  89. package/dist/{IconMail-ejl1H7D9.js → IconMail-D0yowPmX.js} +3 -3
  90. package/dist/{IconMenu-FlE3z6fX.js → IconMenu-Btzwi7Bu.js} +3 -3
  91. package/dist/{IconMoneyBag-CYq7aYjH.js → IconMoneyBag-BcZCfjrN.js} +3 -3
  92. package/dist/{IconMoreHoriz-B0mCtW1_.js → IconMoreHoriz-CYiGX78Y.js} +3 -3
  93. package/dist/{IconNotifications-Bm_gSQGu.js → IconNotifications-uBv1nZZ2.js} +3 -3
  94. package/dist/{IconOdometer-COcVC_eb.js → IconOdometer-DZASryD7.js} +3 -3
  95. package/dist/{IconOpenInNew-DFieFQIk.js → IconOpenInNew-VuTM8uiR.js} +3 -3
  96. package/dist/{IconPalette-DoDIzZJO.js → IconPalette-B78tp213.js} +3 -3
  97. package/dist/{IconPaypal-CX6Z2rvX.js → IconPaypal-z7u9aPLj.js} +3 -3
  98. package/dist/{IconPerson-CK0AXlS_.js → IconPerson-DWwdRmJX.js} +3 -3
  99. package/dist/{IconPersonSearch-Da5EdDrS.js → IconPersonSearch-4ESzm5yH.js} +3 -3
  100. package/dist/{IconPhotoCamera-DZHI-Yb7.js → IconPhotoCamera-Drkhsfpi.js} +3 -3
  101. package/dist/{IconPinterest-B3UM6t9-.js → IconPinterest-BhgYE6Fc.js} +3 -3
  102. package/dist/{IconPlayArrow-CR7bXHC8.js → IconPlayArrow-ztNUkoji.js} +3 -3
  103. package/dist/{IconPolicy-CzN-v54O.js → IconPolicy-DrcQUdvI.js} +3 -3
  104. package/dist/{IconPower-C5MJihEZ.js → IconPower-BISw4q1i.js} +3 -3
  105. package/dist/{IconPowerOff-BziDMScz.js → IconPowerOff-D94o_eIX.js} +3 -3
  106. package/dist/{IconPriorityHigh-Bv-j3DaQ.js → IconPriorityHigh-DzCnK1QW.js} +3 -3
  107. package/dist/{IconRemove-Bo4RUocr.js → IconRemove-gGo2PMeX.js} +3 -3
  108. package/dist/{IconRequestQuote-BUNyScQ-.js → IconRequestQuote-CWfytYvA.js} +3 -3
  109. package/dist/{IconResetWrench-DCcBmojh.js → IconResetWrench-B0tYLDcb.js} +3 -3
  110. package/dist/{IconRoad-BGTu-WPJ.js → IconRoad-m4Orr44c.js} +3 -3
  111. package/dist/{IconRoundedCorner-DycjfuJj.js → IconRoundedCorner-CqdpAVGU.js} +3 -3
  112. package/dist/{IconRuler-Da8zNDvf.js → IconRuler-C8SSjTfX.js} +3 -3
  113. package/dist/{IconRvClassA-D2-lug19.js → IconRvClassA-CFQOw02-.js} +3 -3
  114. package/dist/{IconRvClassB-Coe3FpBI.js → IconRvClassB-p-03DBol.js} +3 -3
  115. package/dist/{IconRvClassC-DWnLqMGg.js → IconRvClassC-BP5Zzlj_.js} +3 -3
  116. package/dist/{IconRvFifthWheel-CB_mQ-tO.js → IconRvFifthWheel-BMGxt3_M.js} +3 -3
  117. package/dist/{IconRvFishHouse-Cs2fm3r1.js → IconRvFishHouse-C7iNMr-3.js} +3 -3
  118. package/dist/{IconRvParkModel-D4S_iYTG.js → IconRvParkModel-l4Rx5P9F.js} +3 -3
  119. package/dist/{IconRvPopUpCamper-CW47dgll.js → IconRvPopUpCamper-BY6aLEic.js} +3 -3
  120. package/dist/{IconRvTravelTrailer-CC48bci7.js → IconRvTravelTrailer-FstodwFk.js} +3 -3
  121. package/dist/{IconRvTruckCamper-EoEVfaJM.js → IconRvTruckCamper-lLLE86pz.js} +3 -3
  122. package/dist/{IconSailing-CPcgnYwx.js → IconSailing-svTfDLn9.js} +3 -3
  123. package/dist/{IconSchool-3Dy70s11.js → IconSchool-CUB4fiMX.js} +3 -3
  124. package/dist/{IconSearch-C8WeOYws.js → IconSearch-QZW19aza.js} +3 -3
  125. package/dist/{IconSeating-D7B47LU4.js → IconSeating-B3MAIZkv.js} +3 -3
  126. package/dist/{IconSell-B95iGdOh.js → IconSell-CG2i7EOI.js} +3 -3
  127. package/dist/{IconSensors-Ckv6BEOK.js → IconSensors-BVBTJDAv.js} +3 -3
  128. package/dist/{IconSettings-CLrLZmQs.js → IconSettings-BGJv8ylA.js} +3 -3
  129. package/dist/{IconShare-CH2w2udo.js → IconShare-DLN_ze1T.js} +3 -3
  130. package/dist/{IconShieldCheck-BBHcsJhF.js → IconShieldCheck-DwGlL83P.js} +3 -3
  131. package/dist/{IconShoppingCart-_CKPKJ12.js → IconShoppingCart-BWcDIQ0t.js} +3 -3
  132. package/dist/{IconSleeps-CTzXW2RS.js → IconSleeps-Bl1OHp_d.js} +3 -3
  133. package/dist/{IconSms-C_jULP6X.js → IconSms-DXF4Rvv5.js} +3 -3
  134. package/dist/{IconSnowflake-DYpTwl2q.js → IconSnowflake-3DOCBRxO.js} +3 -3
  135. package/dist/{IconStar-CR0UA_S9.js → IconStar-y4w1Q_Ly.js} +3 -3
  136. package/dist/{IconStarFilled-DEnQm6s8.js → IconStarFilled-h3V6lcA1.js} +3 -3
  137. package/dist/{IconStarHalf-DZqwFVlC.js → IconStarHalf-CD3Otd__.js} +3 -3
  138. package/dist/{IconSummarize-BwU7xViX.js → IconSummarize-DQAFpTrk.js} +3 -3
  139. package/dist/{IconSwapHoriz-B7Nu99ui.js → IconSwapHoriz-C3usXzhR.js} +3 -3
  140. package/dist/{IconSwapVert-D83OnTLJ.js → IconSwapVert-CODa7if1.js} +3 -3
  141. package/dist/{IconThreeDRotation-WuabFIaS.js → IconThreeDRotation-Dt-qEsTU.js} +3 -3
  142. package/dist/{IconThumbUp-DwPs1Aog.js → IconThumbUp-2aoi8Hn6.js} +3 -3
  143. package/dist/{IconTrendingDown-CKqQl7o7.js → IconTrendingDown-Cc1jUDOB.js} +3 -3
  144. package/dist/{IconTrophy-DRcIPW-F.js → IconTrophy-CWU4189G.js} +3 -3
  145. package/dist/{IconTune-CXVj1kqb.js → IconTune-PtcGFHGO.js} +3 -3
  146. package/dist/{IconTwitter-B5AwI_-2.js → IconTwitter-Q7-VmjkP.js} +3 -3
  147. package/dist/{IconUmbrella-BWmv4GFi.js → IconUmbrella-B_1l6UAu.js} +3 -3
  148. package/dist/{IconVerified-BMRocsAd.js → IconVerified-BCiRYMzp.js} +3 -3
  149. package/dist/{IconVideocam-D5eUdBxR.js → IconVideocam-TZ4vpxTp.js} +3 -3
  150. package/dist/{IconViewInAr-CvR2gh_r.js → IconViewInAr-Dn4BjPYu.js} +3 -3
  151. package/dist/{IconVisibility-BlzyaCVD.js → IconVisibility-nxEIwt29.js} +3 -3
  152. package/dist/{IconVolumeOff-DB757krU.js → IconVolumeOff-D_ASm6Jk.js} +3 -3
  153. package/dist/{IconVolumeOn-CYf77UaC.js → IconVolumeOn-CTVNBoFQ.js} +3 -3
  154. package/dist/{IconWarehouse-DIRQdX8P.js → IconWarehouse-DP-BJpYG.js} +3 -3
  155. package/dist/{IconWarning-n_GTsWOM.js → IconWarning-DcYnbH1n.js} +3 -3
  156. package/dist/{IconWater-DFV09TyV.js → IconWater-Bh1ru5aW.js} +3 -3
  157. package/dist/{IconWeight-Cq12caT_.js → IconWeight-DfxHx8iL.js} +3 -3
  158. package/dist/{IconWidth-DtPjsKm8.js → IconWidth-E4u3XnEj.js} +3 -3
  159. package/dist/{IconWorkspacePremium-_Olggt_G.js → IconWorkspacePremium-Cn2NhzIu.js} +3 -3
  160. package/dist/{IconWrench-C2MHGxho.js → IconWrench-DHpCQriM.js} +3 -3
  161. package/dist/{IconYoutube-C8cHj1uF.js → IconYoutube-DHlDGTQp.js} +3 -3
  162. package/dist/css/reset.css +2 -2
  163. package/dist/css/utilities-base.css +67 -38
  164. package/dist/css/utilities-responsive.css +428 -312
  165. package/dist/css/variables.css +6 -0
  166. package/dist/logo-aero-CkTVffxb.js +17 -0
  167. package/dist/logo-aero-Z-V0eOLB.cjs +2 -0
  168. package/dist/logo-atv-BC9pKXBl.js +21 -0
  169. package/dist/logo-atv-xQMzut2h.cjs +2 -0
  170. package/dist/logo-boatmart-B9upxiMl.cjs +2 -0
  171. package/dist/logo-boatmart-DroAqtiq.js +16 -0
  172. package/dist/logo-cycle-c9schUUY.cjs +2 -0
  173. package/dist/logo-cycle-iWCyRwSL.js +21 -0
  174. package/dist/logo-equipment-3VYa6YcW.cjs +2 -0
  175. package/dist/logo-equipment-BoqO9oqu.js +17 -0
  176. package/dist/logo-pwc-BBFWrkvE.js +21 -0
  177. package/dist/logo-pwc-DhXtaTyu.cjs +2 -0
  178. package/dist/logo-rv-BRXxuciP.cjs +2 -0
  179. package/dist/logo-rv-DzHxIw2C.js +21 -0
  180. package/dist/logo-snow-Dzpaeho2.js +17 -0
  181. package/dist/logo-snow-PVobISvF.cjs +2 -0
  182. package/dist/logo-truck-DE0J4OIJ.cjs +2 -0
  183. package/dist/logo-truck-MUfLC0tr.js +21 -0
  184. package/dist/mark-aero-CFjGMjbx.cjs +2 -0
  185. package/dist/mark-aero-D8m3JDkS.js +23 -0
  186. package/dist/mark-atv-1Vppojls.js +19 -0
  187. package/dist/mark-atv-BhRn5mUA.cjs +2 -0
  188. package/dist/mark-boatmart-Bmkv3dOs.cjs +2 -0
  189. package/dist/mark-boatmart-b77RvD0c.js +16 -0
  190. package/dist/mark-cycle-BFxZOD4K.js +23 -0
  191. package/dist/mark-cycle-QCLSEZTF.cjs +2 -0
  192. package/dist/mark-equipment-BbnRZ0vl.js +19 -0
  193. package/dist/mark-equipment-ThuZOvf6.cjs +2 -0
  194. package/dist/mark-pwc-CQWDRntw.cjs +2 -0
  195. package/dist/mark-pwc-CQa98Z9S.js +21 -0
  196. package/dist/mark-rv-BtQWH4-a.cjs +2 -0
  197. package/dist/mark-rv-DY1wwuIO.js +21 -0
  198. package/dist/mark-snow-BEUxteW6.js +23 -0
  199. package/dist/mark-snow-Bek2T8IY.cjs +2 -0
  200. package/dist/mark-truck-BsOOC6Lx.cjs +2 -0
  201. package/dist/mark-truck-CUaX6FYM.js +19 -0
  202. package/dist/tide-design-system.cjs +2 -2
  203. package/dist/tide-design-system.css +1 -0
  204. package/dist/tide-design-system.esm.d.ts +0 -2031
  205. package/dist/tide-design-system.esm.js +1447 -1133
  206. package/dist/utilities/realm.ts +17 -0
  207. package/dist/utilities/storybook.ts +0 -2
  208. package/dist/utilities/viewport.ts +2 -2
  209. package/index.ts +8 -0
  210. package/package.json +1 -1
  211. package/src/assets/svg/branding/logo/logo-aero.svg +9 -0
  212. package/src/assets/svg/branding/logo/logo-atv.svg +3 -0
  213. package/src/assets/svg/branding/logo/logo-boatmart.svg +18 -0
  214. package/src/assets/svg/branding/logo/logo-cycle.svg +3 -0
  215. package/src/assets/svg/branding/logo/logo-equipment.svg +11 -0
  216. package/src/assets/svg/branding/logo/logo-pwc.svg +3 -0
  217. package/src/assets/svg/branding/logo/logo-rv.svg +3 -0
  218. package/src/assets/svg/branding/logo/logo-snow.svg +12 -0
  219. package/src/assets/svg/branding/logo/logo-truck.svg +3 -0
  220. package/src/assets/svg/branding/mark/mark-aero.svg +4 -0
  221. package/src/assets/svg/branding/mark/mark-atv.svg +3 -0
  222. package/src/assets/svg/branding/mark/mark-boatmart.svg +17 -0
  223. package/src/assets/svg/branding/mark/mark-cycle.svg +4 -0
  224. package/src/assets/svg/branding/mark/mark-equipment.svg +3 -0
  225. package/src/assets/svg/branding/mark/mark-pwc.svg +3 -0
  226. package/src/assets/svg/branding/mark/mark-rv.svg +3 -0
  227. package/src/assets/svg/branding/mark/mark-snow.svg +4 -0
  228. package/src/assets/svg/branding/mark/mark-truck.svg +3 -0
  229. package/src/assets/svg/icons/realm/cycle/IconCycleMotorcycle.svg +4 -0
  230. package/src/assets/svg/icons/realm/cycle/IconCycleTrailer.svg +3 -0
  231. package/src/components/TideChipAction.vue +23 -2
  232. package/src/components/TideIcon.vue +8 -6
  233. package/src/components/TideModal.vue +14 -2
  234. package/src/components/TideRealmLogo.vue +71 -0
  235. package/src/components/TideSheet.vue +11 -2
  236. package/src/components/TideTabs.vue +4 -9
  237. package/src/stories/TideChipAction.stories.ts +10 -4
  238. package/src/stories/TideModal.stories.ts +0 -4
  239. package/src/stories/TideRealmLogo.stories.ts +25 -0
  240. package/src/stories/TideSheet.stories.ts +0 -1
  241. package/src/types/Icon.ts +4 -0
  242. package/src/types/RealmLogo.ts +38 -0
  243. package/src/utilities/realm.ts +17 -0
  244. package/src/utilities/viewport.ts +2 -2
  245. package/tests/TideRealmLogo.spec.ts +58 -0
  246. package/dist/style.css +0 -1
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;}
@@ -267,6 +271,7 @@
267
271
  .sm-tide-bg-surface-accent {background: var(--tide-surface-accent);}
268
272
  .sm-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
269
273
  .sm-tide-bg-surface-floating {background: var(--tide-surface-floating);}
274
+ .sm-tide-bg-surface-inverse {background: var(--tide-surface-inverse);}
270
275
 
271
276
  /* Icon background colors only */
272
277
  .sm-tide-bg-primary-error {background-color: var(--tide-error-primary);}
@@ -295,24 +300,24 @@
295
300
  .sm-tide-transparent-400 {background-color: var(--tide-transparent-400);}
296
301
 
297
302
  /* 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;}
303
+ .sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
304
+ .sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
305
+ .sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
306
+ .sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
307
+ .sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
308
+ .sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
309
+ .sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
310
+ .sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
311
+ .sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
312
+ .sm-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
313
+ .sm-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
314
+ .sm-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
315
+ .sm-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
316
+ .sm-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
317
+ .sm-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
318
+ .sm-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
319
+ .sm-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
320
+ .sm-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
316
321
 
317
322
  /* Font Color */
318
323
  .sm-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -360,9 +365,9 @@
360
365
  .sm-tide-font-32 {font-size: var(--tide-font-32);}
361
366
 
362
367
  /* 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;}
368
+ .sm-tide-font-400 {font-weight: var(--tide-font-regular);}
369
+ .sm-tide-font-500 {font-weight: var(--tide-font-medium);}
370
+ .sm-tide-font-600 {font-weight: var(--tide-font-semibold);}
366
371
  .sm-tide-font-700 {font-weight: 700;}
367
372
 
368
373
  /* Misc */
@@ -478,63 +483,87 @@
478
483
 
479
484
  /* Buttons */
480
485
  /* 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
- }
486
+ .sm-tide-button-primary,
487
+ .sm-tide-button-secondary,
488
+ .sm-tide-button-tertiary,
489
+ .sm-tide-button-quaternary,
490
+ .sm-tide-button-floating {
491
+ border: var(--tide-border-width-2) solid;
492
+ }
493
+
494
+ .sm-tide-button-primary,
495
+ .sm-tide-button-secondary,
496
+ .sm-tide-button-tertiary,
497
+ .sm-tide-button-quaternary {
498
+ box-shadow: none;
499
+ }
500
+
501
+ .sm-tide-button-primary {
502
+ background-color: var(--tide-primary);
503
+ border-color: var(--tide-primary);
504
+ color: var(--tide-on-primary);
505
+ }
506
+
507
+ .sm-tide-button-secondary {
508
+ background-color: var(--tide-secondary);
509
+ border-color: var(--tide-secondary);
510
+ color: var(--tide-on-secondary);
511
+ }
512
+
513
+ .sm-tide-button-tertiary {
514
+ background-color: var(--tide-surface-variant);
515
+ border-color: var(--tide-surface-variant);
516
+ color: var(--tide-secondary);
517
+ }
518
+
519
+ .sm-tide-button-quaternary {
520
+ background-color: var(--tide-surface);
521
+ border-color: var(--tide-surface);
522
+ color: var(--tide-secondary);
523
+ }
524
+
525
+ .sm-tide-button-floating {
526
+ background-color: var(--tide-surface);
527
+ border-color: var(--tide-surface);
528
+ box-shadow: var(--tide-shadow-bottom);
529
+ color: var(--tide-secondary);
530
+ }
531
+
532
+ /* Hover State */
533
+ a.sm-tide-button-primary:hover,
534
+ button.sm-tide-button-primary:enabled:hover {
535
+ background-color: var(--tide-surface);
536
+ border-color: var(--tide-primary);
537
+ color: var(--tide-primary);
538
+ }
539
+
540
+ a.sm-tide-button-secondary:hover,
541
+ button.sm-tide-button-secondary:enabled:hover {
542
+ background-color: var(--tide-surface);
543
+ border-color: var(--tide-secondary);
544
+ color: var(--tide-on-surface);
545
+ }
546
+
547
+ a.sm-tide-button-tertiary:hover,
548
+ button.sm-tide-button-tertiary:enabled:hover {
549
+ background-color: var(--tide-surface-variant);
550
+ border-color: var(--tide-border);
551
+ color: var(--tide-secondary);
552
+ }
553
+
554
+ a.sm-tide-button-quaternary:hover,
555
+ button.sm-tide-button-quaternary:enabled:hover {
556
+ background-color: var(--tide-surface-variant);
557
+ border-color: var(--tide-surface-variant);
558
+ color: var(--tide-secondary);
559
+ }
560
+
561
+ .sm-tide-button-floating:hover,
562
+ button.sm-tide-button-floating:enabled:hover {
563
+ background-color: var(--tide-surface);
564
+ border-color: var(--tide-surface);
565
+ color: var(--tide-secondary);
566
+ }
538
567
 
539
568
  /* Disabled State */
540
569
  button.sm-tide-button-primary:disabled,
@@ -795,6 +824,10 @@
795
824
  .md-tide-width-auto {width: auto;}
796
825
  .md-tide-width-0 {width: 0;}
797
826
  .md-tide-width-full {width: 100%;}
827
+ .md-tide-width-stretch {
828
+ width: -webkit-fill-available;
829
+ width: stretch;
830
+ }
798
831
 
799
832
  .md-tide-height-auto {height: auto;}
800
833
  .md-tide-height-0 {height: 0;}
@@ -815,6 +848,7 @@
815
848
  .md-tide-bg-surface-accent {background: var(--tide-surface-accent);}
816
849
  .md-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
817
850
  .md-tide-bg-surface-floating {background: var(--tide-surface-floating);}
851
+ .md-tide-bg-surface-inverse {background: var(--tide-surface-inverse);}
818
852
 
819
853
  /* Icon background colors only */
820
854
  .md-tide-bg-primary-error {background-color: var(--tide-error-primary);}
@@ -843,24 +877,24 @@
843
877
  .md-tide-transparent-400 {background-color: var(--tide-transparent-400);}
844
878
 
845
879
  /* 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;}
880
+ .md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
881
+ .md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
882
+ .md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
883
+ .md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
884
+ .md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
885
+ .md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
886
+ .md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
887
+ .md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
888
+ .md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
889
+ .md-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
890
+ .md-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
891
+ .md-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
892
+ .md-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
893
+ .md-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
894
+ .md-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
895
+ .md-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
896
+ .md-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
897
+ .md-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
864
898
 
865
899
  /* Font Color */
866
900
  .md-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -908,9 +942,9 @@
908
942
  .md-tide-font-32 {font-size: var(--tide-font-32);}
909
943
 
910
944
  /* 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;}
945
+ .md-tide-font-400 {font-weight: var(--tide-font-regular);}
946
+ .md-tide-font-500 {font-weight: var(--tide-font-medium);}
947
+ .md-tide-font-600 {font-weight: var(--tide-font-semibold);}
914
948
  .md-tide-font-700 {font-weight: 700;}
915
949
 
916
950
  /* Misc */
@@ -1026,63 +1060,87 @@
1026
1060
 
1027
1061
  /* Buttons */
1028
1062
  /* 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
- }
1063
+ .md-tide-button-primary,
1064
+ .md-tide-button-secondary,
1065
+ .md-tide-button-tertiary,
1066
+ .md-tide-button-quaternary,
1067
+ .md-tide-button-floating {
1068
+ border: var(--tide-border-width-2) solid;
1069
+ }
1070
+
1071
+ .md-tide-button-primary,
1072
+ .md-tide-button-secondary,
1073
+ .md-tide-button-tertiary,
1074
+ .md-tide-button-quaternary {
1075
+ box-shadow: none;
1076
+ }
1077
+
1078
+ .md-tide-button-primary {
1079
+ background-color: var(--tide-primary);
1080
+ border-color: var(--tide-primary);
1081
+ color: var(--tide-on-primary);
1082
+ }
1083
+
1084
+ .md-tide-button-secondary {
1085
+ background-color: var(--tide-secondary);
1086
+ border-color: var(--tide-secondary);
1087
+ color: var(--tide-on-secondary);
1088
+ }
1089
+
1090
+ .md-tide-button-tertiary {
1091
+ background-color: var(--tide-surface-variant);
1092
+ border-color: var(--tide-surface-variant);
1093
+ color: var(--tide-secondary);
1094
+ }
1095
+
1096
+ .md-tide-button-quaternary {
1097
+ background-color: var(--tide-surface);
1098
+ border-color: var(--tide-surface);
1099
+ color: var(--tide-secondary);
1100
+ }
1101
+
1102
+ .md-tide-button-floating {
1103
+ background-color: var(--tide-surface);
1104
+ border-color: var(--tide-surface);
1105
+ box-shadow: var(--tide-shadow-bottom);
1106
+ color: var(--tide-secondary);
1107
+ }
1108
+
1109
+ /* Hover State */
1110
+ a.md-tide-button-primary:hover,
1111
+ button.md-tide-button-primary:enabled:hover {
1112
+ background-color: var(--tide-surface);
1113
+ border-color: var(--tide-primary);
1114
+ color: var(--tide-primary);
1115
+ }
1116
+
1117
+ a.md-tide-button-secondary:hover,
1118
+ button.md-tide-button-secondary:enabled:hover {
1119
+ background-color: var(--tide-surface);
1120
+ border-color: var(--tide-secondary);
1121
+ color: var(--tide-on-surface);
1122
+ }
1123
+
1124
+ a.md-tide-button-tertiary:hover,
1125
+ button.md-tide-button-tertiary:enabled:hover {
1126
+ background-color: var(--tide-surface-variant);
1127
+ border-color: var(--tide-border);
1128
+ color: var(--tide-secondary);
1129
+ }
1130
+
1131
+ a.md-tide-button-quaternary:hover,
1132
+ button.md-tide-button-quaternary:enabled:hover {
1133
+ background-color: var(--tide-surface-variant);
1134
+ border-color: var(--tide-surface-variant);
1135
+ color: var(--tide-secondary);
1136
+ }
1137
+
1138
+ .md-tide-button-floating:hover,
1139
+ button.md-tide-button-floating:enabled:hover {
1140
+ background-color: var(--tide-surface);
1141
+ border-color: var(--tide-surface);
1142
+ color: var(--tide-secondary);
1143
+ }
1086
1144
 
1087
1145
  /* Disabled State */
1088
1146
  button.md-tide-button-primary:disabled,
@@ -1343,6 +1401,10 @@
1343
1401
  .lg-tide-width-auto {width: auto;}
1344
1402
  .lg-tide-width-0 {width: 0;}
1345
1403
  .lg-tide-width-full {width: 100%;}
1404
+ .lg-tide-width-stretch {
1405
+ width: -webkit-fill-available;
1406
+ width: stretch;
1407
+ }
1346
1408
 
1347
1409
  .lg-tide-height-auto {height: auto;}
1348
1410
  .lg-tide-height-0 {height: 0;}
@@ -1363,6 +1425,7 @@
1363
1425
  .lg-tide-bg-surface-accent {background: var(--tide-surface-accent);}
1364
1426
  .lg-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
1365
1427
  .lg-tide-bg-surface-floating {background: var(--tide-surface-floating);}
1428
+ .lg-tide-bg-surface-inverse {background: var(--tide-surface-inverse);}
1366
1429
 
1367
1430
  /* Icon background colors only */
1368
1431
  .lg-tide-bg-primary-error {background-color: var(--tide-error-primary);}
@@ -1391,24 +1454,24 @@
1391
1454
  .lg-tide-transparent-400 {background-color: var(--tide-transparent-400);}
1392
1455
 
1393
1456
  /* 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;}
1457
+ .lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1458
+ .lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1459
+ .lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1460
+ .lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1461
+ .lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1462
+ .lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
1463
+ .lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
1464
+ .lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
1465
+ .lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
1466
+ .lg-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
1467
+ .lg-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
1468
+ .lg-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
1469
+ .lg-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
1470
+ .lg-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
1471
+ .lg-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
1472
+ .lg-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
1473
+ .lg-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
1474
+ .lg-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
1412
1475
 
1413
1476
  /* Font Color */
1414
1477
  .lg-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -1456,9 +1519,9 @@
1456
1519
  .lg-tide-font-32 {font-size: var(--tide-font-32);}
1457
1520
 
1458
1521
  /* 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;}
1522
+ .lg-tide-font-400 {font-weight: var(--tide-font-regular);}
1523
+ .lg-tide-font-500 {font-weight: var(--tide-font-medium);}
1524
+ .lg-tide-font-600 {font-weight: var(--tide-font-semibold);}
1462
1525
  .lg-tide-font-700 {font-weight: 700;}
1463
1526
 
1464
1527
  /* Misc */
@@ -1574,63 +1637,87 @@
1574
1637
 
1575
1638
  /* Buttons */
1576
1639
  /* 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
- }
1640
+ .lg-tide-button-primary,
1641
+ .lg-tide-button-secondary,
1642
+ .lg-tide-button-tertiary,
1643
+ .lg-tide-button-quaternary,
1644
+ .lg-tide-button-floating {
1645
+ border: var(--tide-border-width-2) solid;
1646
+ }
1647
+
1648
+ .lg-tide-button-primary,
1649
+ .lg-tide-button-secondary,
1650
+ .lg-tide-button-tertiary,
1651
+ .lg-tide-button-quaternary {
1652
+ box-shadow: none;
1653
+ }
1654
+
1655
+ .lg-tide-button-primary {
1656
+ background-color: var(--tide-primary);
1657
+ border-color: var(--tide-primary);
1658
+ color: var(--tide-on-primary);
1659
+ }
1660
+
1661
+ .lg-tide-button-secondary {
1662
+ background-color: var(--tide-secondary);
1663
+ border-color: var(--tide-secondary);
1664
+ color: var(--tide-on-secondary);
1665
+ }
1666
+
1667
+ .lg-tide-button-tertiary {
1668
+ background-color: var(--tide-surface-variant);
1669
+ border-color: var(--tide-surface-variant);
1670
+ color: var(--tide-secondary);
1671
+ }
1672
+
1673
+ .lg-tide-button-quaternary {
1674
+ background-color: var(--tide-surface);
1675
+ border-color: var(--tide-surface);
1676
+ color: var(--tide-secondary);
1677
+ }
1678
+
1679
+ .lg-tide-button-floating {
1680
+ background-color: var(--tide-surface);
1681
+ border-color: var(--tide-surface);
1682
+ box-shadow: var(--tide-shadow-bottom);
1683
+ color: var(--tide-secondary);
1684
+ }
1685
+
1686
+ /* Hover State */
1687
+ a.lg-tide-button-primary:hover,
1688
+ button.lg-tide-button-primary:enabled:hover {
1689
+ background-color: var(--tide-surface);
1690
+ border-color: var(--tide-primary);
1691
+ color: var(--tide-primary);
1692
+ }
1693
+
1694
+ a.lg-tide-button-secondary:hover,
1695
+ button.lg-tide-button-secondary:enabled:hover {
1696
+ background-color: var(--tide-surface);
1697
+ border-color: var(--tide-secondary);
1698
+ color: var(--tide-on-surface);
1699
+ }
1700
+
1701
+ a.lg-tide-button-tertiary:hover,
1702
+ button.lg-tide-button-tertiary:enabled:hover {
1703
+ background-color: var(--tide-surface-variant);
1704
+ border-color: var(--tide-border);
1705
+ color: var(--tide-secondary);
1706
+ }
1707
+
1708
+ a.lg-tide-button-quaternary:hover,
1709
+ button.lg-tide-button-quaternary:enabled:hover {
1710
+ background-color: var(--tide-surface-variant);
1711
+ border-color: var(--tide-surface-variant);
1712
+ color: var(--tide-secondary);
1713
+ }
1714
+
1715
+ .lg-tide-button-floating:hover,
1716
+ button.lg-tide-button-floating:enabled:hover {
1717
+ background-color: var(--tide-surface);
1718
+ border-color: var(--tide-surface);
1719
+ color: var(--tide-secondary);
1720
+ }
1634
1721
 
1635
1722
  /* Disabled State */
1636
1723
  button.lg-tide-button-primary:disabled,
@@ -1891,6 +1978,10 @@
1891
1978
  .xl-tide-width-auto {width: auto;}
1892
1979
  .xl-tide-width-0 {width: 0;}
1893
1980
  .xl-tide-width-full {width: 100%;}
1981
+ .xl-tide-width-stretch {
1982
+ width: -webkit-fill-available;
1983
+ width: stretch;
1984
+ }
1894
1985
 
1895
1986
  .xl-tide-height-auto {height: auto;}
1896
1987
  .xl-tide-height-0 {height: 0;}
@@ -1911,6 +2002,7 @@
1911
2002
  .xl-tide-bg-surface-accent {background: var(--tide-surface-accent);}
1912
2003
  .xl-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
1913
2004
  .xl-tide-bg-surface-floating {background: var(--tide-surface-floating);}
2005
+ .xl-tide-bg-surface-inverse {background: var(--tide-surface-inverse);}
1914
2006
 
1915
2007
  /* Icon background colors only */
1916
2008
  .xl-tide-bg-primary-error {background-color: var(--tide-error-primary);}
@@ -1939,24 +2031,24 @@
1939
2031
  .xl-tide-transparent-400 {background-color: var(--tide-transparent-400);}
1940
2032
 
1941
2033
  /* 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;}
2034
+ .xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2035
+ .xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2036
+ .xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2037
+ .xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2038
+ .xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2039
+ .xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
2040
+ .xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
2041
+ .xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
2042
+ .xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
2043
+ .xl-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
2044
+ .xl-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
2045
+ .xl-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
2046
+ .xl-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
2047
+ .xl-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
2048
+ .xl-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
2049
+ .xl-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
2050
+ .xl-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
2051
+ .xl-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
1960
2052
 
1961
2053
  /* Font Color */
1962
2054
  .xl-tide-font-on-primary {color: var(--tide-on-primary);}
@@ -2004,9 +2096,9 @@
2004
2096
  .xl-tide-font-32 {font-size: var(--tide-font-32);}
2005
2097
 
2006
2098
  /* 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;}
2099
+ .xl-tide-font-400 {font-weight: var(--tide-font-regular);}
2100
+ .xl-tide-font-500 {font-weight: var(--tide-font-medium);}
2101
+ .xl-tide-font-600 {font-weight: var(--tide-font-semibold);}
2010
2102
  .xl-tide-font-700 {font-weight: 700;}
2011
2103
 
2012
2104
  /* Misc */
@@ -2122,63 +2214,87 @@
2122
2214
 
2123
2215
  /* Buttons */
2124
2216
  /* 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
- }
2217
+ .xl-tide-button-primary,
2218
+ .xl-tide-button-secondary,
2219
+ .xl-tide-button-tertiary,
2220
+ .xl-tide-button-quaternary,
2221
+ .xl-tide-button-floating {
2222
+ border: var(--tide-border-width-2) solid;
2223
+ }
2224
+
2225
+ .xl-tide-button-primary,
2226
+ .xl-tide-button-secondary,
2227
+ .xl-tide-button-tertiary,
2228
+ .xl-tide-button-quaternary {
2229
+ box-shadow: none;
2230
+ }
2231
+
2232
+ .xl-tide-button-primary {
2233
+ background-color: var(--tide-primary);
2234
+ border-color: var(--tide-primary);
2235
+ color: var(--tide-on-primary);
2236
+ }
2237
+
2238
+ .xl-tide-button-secondary {
2239
+ background-color: var(--tide-secondary);
2240
+ border-color: var(--tide-secondary);
2241
+ color: var(--tide-on-secondary);
2242
+ }
2243
+
2244
+ .xl-tide-button-tertiary {
2245
+ background-color: var(--tide-surface-variant);
2246
+ border-color: var(--tide-surface-variant);
2247
+ color: var(--tide-secondary);
2248
+ }
2249
+
2250
+ .xl-tide-button-quaternary {
2251
+ background-color: var(--tide-surface);
2252
+ border-color: var(--tide-surface);
2253
+ color: var(--tide-secondary);
2254
+ }
2255
+
2256
+ .xl-tide-button-floating {
2257
+ background-color: var(--tide-surface);
2258
+ border-color: var(--tide-surface);
2259
+ box-shadow: var(--tide-shadow-bottom);
2260
+ color: var(--tide-secondary);
2261
+ }
2262
+
2263
+ /* Hover State */
2264
+ a.xl-tide-button-primary:hover,
2265
+ button.xl-tide-button-primary:enabled:hover {
2266
+ background-color: var(--tide-surface);
2267
+ border-color: var(--tide-primary);
2268
+ color: var(--tide-primary);
2269
+ }
2270
+
2271
+ a.xl-tide-button-secondary:hover,
2272
+ button.xl-tide-button-secondary:enabled:hover {
2273
+ background-color: var(--tide-surface);
2274
+ border-color: var(--tide-secondary);
2275
+ color: var(--tide-on-surface);
2276
+ }
2277
+
2278
+ a.xl-tide-button-tertiary:hover,
2279
+ button.xl-tide-button-tertiary:enabled:hover {
2280
+ background-color: var(--tide-surface-variant);
2281
+ border-color: var(--tide-border);
2282
+ color: var(--tide-secondary);
2283
+ }
2284
+
2285
+ a.xl-tide-button-quaternary:hover,
2286
+ button.xl-tide-button-quaternary:enabled:hover {
2287
+ background-color: var(--tide-surface-variant);
2288
+ border-color: var(--tide-surface-variant);
2289
+ color: var(--tide-secondary);
2290
+ }
2291
+
2292
+ .xl-tide-button-floating:hover,
2293
+ button.xl-tide-button-floating:enabled:hover {
2294
+ background-color: var(--tide-surface);
2295
+ border-color: var(--tide-surface);
2296
+ color: var(--tide-secondary);
2297
+ }
2182
2298
 
2183
2299
  /* Disabled State */
2184
2300
  button.xl-tide-button-primary:disabled,