@homebound/beam 3.6.0 → 3.7.0

package/dist/truss.css

@@ -1,3 +1,4 @@
+:root { --t-spacing: 8px; }
 /* @truss p:1000 c:animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite */
 .animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 /* @truss p:1000 c:bd_0 */
@@ -91,13 +92,13 @@
 /* @truss p:2000 c:fn */
 .fn { flex: none; }
 /* @truss p:2000 c:gap0 */
-.gap0 { gap: 0px; }
+.gap0 { gap: calc(var(--t-spacing) * 0); }
 /* @truss p:2000 c:gap1 */
-.gap1 { gap: 8px; }
+.gap1 { gap: calc(var(--t-spacing) * 1); }
 /* @truss p:2000 c:gap2 */
-.gap2 { gap: 16px; }
+.gap2 { gap: calc(var(--t-spacing) * 2); }
 /* @truss p:2000 c:gap3 */
-.gap3 { gap: 24px; }
+.gap3 { gap: calc(var(--t-spacing) * 3); }
 /* @truss p:2000 c:gap_12px */
 .gap_12px { gap: 12px; }
 /* @truss p:2000 c:gap_4px */
@@ -307,7 +308,7 @@
 /* @truss p:3000 c:bshModal */
 .bshModal { box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04); }
 /* @truss p:3000 c:cg3 */
-.cg3 { column-gap: 24px; }
+.cg3 { column-gap: calc(var(--t-spacing) * 3); }
 /* @truss p:3000 c:cli_inset_50 */
 .cli_inset_50 { clip: inset(50%); }
 /* @truss p:3000 c:clp_none */
@@ -637,7 +638,7 @@
 /* @truss p:4000 c:bot_0 */
 .bot_0 { bottom: 0; }
 /* @truss p:4000 c:bottom0 */
-.bottom0 { bottom: 0px; }
+.bottom0 { bottom: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:bottom_4px */
 .bottom_4px { bottom: 4px; }
 /* @truss p:4000 c:brs_solid */
@@ -651,9 +652,9 @@
 /* @truss p:4000 c:h100 */
 .h100 { height: 100%; }
 /* @truss p:4000 c:h2 */
-.h2 { height: 16px; }
+.h2 { height: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:h5 */
-.h5 { height: 40px; }
+.h5 { height: calc(var(--t-spacing) * 5); }
 /* @truss p:4000 c:h_10px */
 .h_10px { height: 10px; }
 /* @truss p:4000 c:h_114px */
@@ -689,17 +690,17 @@
 /* @truss p:4000 c:l_0 */
 .l_0 { left: 0; }
 /* @truss p:4000 c:left0 */
-.left0 { left: 0px; }
+.left0 { left: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:left1 */
-.left1 { left: 8px; }
+.left1 { left: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:left3 */
-.left3 { left: 24px; }
-/* @truss p:4000 c:left_0px */
-.left_0px { left: 0px; }
+.left3 { left: calc(var(--t-spacing) * 3); }
+/* @truss p:4000 c:left_0 */
+.left_0 { left: calc(var(--t-spacing) * 0); }
+/* @truss p:4000 c:left_100 */
+.left_100 { left: calc(var(--t-spacing) * 100); }
 /* @truss p:4000 c:left_2px */
 .left_2px { left: 2px; }
-/* @truss p:4000 c:left_800px */
-.left_800px { left: 800px; }
 /* @truss p:4000 c:maxh_50 */
 .maxh_50 { max-height: 50%; }
 /* @truss p:4000 c:maxh_74px */
@@ -723,15 +724,15 @@
 /* @truss p:4000 c:maxw_550px */
 .maxw_550px { max-width: 550px; }
 /* @truss p:4000 c:mb0 */
-.mb0 { margin-bottom: 0px; }
+.mb0 { margin-bottom: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:mb1 */
-.mb1 { margin-bottom: 8px; }
+.mb1 { margin-bottom: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:mb2 */
-.mb2 { margin-bottom: 16px; }
+.mb2 { margin-bottom: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:mb3 */
-.mb3 { margin-bottom: 24px; }
+.mb3 { margin-bottom: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:mb4 */
-.mb4 { margin-bottom: 32px; }
+.mb4 { margin-bottom: calc(var(--t-spacing) * 4); }
 /* @truss p:4000 c:mb_12px */
 .mb_12px { margin-bottom: 12px; }
 /* @truss p:4000 c:mb_2px */
@@ -757,29 +758,29 @@
 /* @truss p:4000 c:minWidth_fit_content */
 .minWidth_fit_content { min-width: fit-content; }
 /* @truss p:4000 c:ml0 */
-.ml0 { margin-left: 0px; }
+.ml0 { margin-left: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:ml1 */
-.ml1 { margin-left: 8px; }
+.ml1 { margin-left: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:ml2 */
-.ml2 { margin-left: 16px; }
+.ml2 { margin-left: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:ml_12px */
 .ml_12px { margin-left: 12px; }
 /* @truss p:4000 c:ml_4px */
 .ml_4px { margin-left: 4px; }
-/* @truss p:4000 c:ml_neg8px */
-.ml_neg8px { margin-left: -8px; }
+/* @truss p:4000 c:ml_neg1 */
+.ml_neg1 { margin-left: calc(var(--t-spacing) * -1); }
 /* @truss p:4000 c:mla */
 .mla { margin-left: auto; }
 /* @truss p:4000 c:mr0 */
-.mr0 { margin-right: 0px; }
+.mr0 { margin-right: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:mr1 */
-.mr1 { margin-right: 8px; }
+.mr1 { margin-right: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:mr2 */
-.mr2 { margin-right: 16px; }
+.mr2 { margin-right: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:mr3 */
-.mr3 { margin-right: 24px; }
+.mr3 { margin-right: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:mr4 */
-.mr4 { margin-right: 32px; }
+.mr4 { margin-right: calc(var(--t-spacing) * 4); }
 /* @truss p:4000 c:mr_10px */
 .mr_10px { margin-right: 10px; }
 /* @truss p:4000 c:mr_12px */
@@ -791,11 +792,11 @@
 /* @truss p:4000 c:mra */
 .mra { margin-right: auto; }
 /* @truss p:4000 c:mt0 */
-.mt0 { margin-top: 0px; }
+.mt0 { margin-top: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:mt1 */
-.mt1 { margin-top: 8px; }
+.mt1 { margin-top: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:mt2 */
-.mt2 { margin-top: 16px; }
+.mt2 { margin-top: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:mt_12px */
 .mt_12px { margin-top: 12px; }
 /* @truss p:4000 c:mt_2px */
@@ -819,13 +820,13 @@
 /* @truss p:4000 c:oys */
 .oys { overflow-y: scroll; }
 /* @truss p:4000 c:pb0 */
-.pb0 { padding-bottom: 0px; }
+.pb0 { padding-bottom: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pb1 */
-.pb1 { padding-bottom: 8px; }
+.pb1 { padding-bottom: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pb2 */
-.pb2 { padding-bottom: 16px; }
+.pb2 { padding-bottom: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pb3 */
-.pb3 { padding-bottom: 24px; }
+.pb3 { padding-bottom: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pb_12px */
 .pb_12px { padding-bottom: 12px; }
 /* @truss p:4000 c:pb_25px */
@@ -837,15 +838,15 @@
 /* @truss p:4000 c:pb_6px */
 .pb_6px { padding-bottom: 6px; }
 /* @truss p:4000 c:pl0 */
-.pl0 { padding-left: 0px; }
+.pl0 { padding-left: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pl1 */
-.pl1 { padding-left: 8px; }
+.pl1 { padding-left: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pl2 */
-.pl2 { padding-left: 16px; }
+.pl2 { padding-left: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pl3 */
-.pl3 { padding-left: 24px; }
+.pl3 { padding-left: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pl4 */
-.pl4 { padding-left: 32px; }
+.pl4 { padding-left: calc(var(--t-spacing) * 4); }
 /* @truss p:4000 c:pl_10px */
 .pl_10px { padding-left: 10px; }
 /* @truss p:4000 c:pl_12px */
@@ -858,14 +859,16 @@
 .pl_4px { padding-left: 4px; }
 /* @truss p:4000 c:pl_6px */
 .pl_6px { padding-left: 6px; }
+/* @truss p:4000 c:pl_8px */
+.pl_8px { padding-left: 8px; }
 /* @truss p:4000 c:pr0 */
-.pr0 { padding-right: 0px; }
+.pr0 { padding-right: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pr1 */
-.pr1 { padding-right: 8px; }
+.pr1 { padding-right: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pr2 */
-.pr2 { padding-right: 16px; }
+.pr2 { padding-right: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pr3 */
-.pr3 { padding-right: 24px; }
+.pr3 { padding-right: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pr_10px */
 .pr_10px { padding-right: 10px; }
 /* @truss p:4000 c:pr_12px */
@@ -876,14 +879,16 @@
 .pr_4px { padding-right: 4px; }
 /* @truss p:4000 c:pr_6px */
 .pr_6px { padding-right: 6px; }
+/* @truss p:4000 c:pr_8px */
+.pr_8px { padding-right: 8px; }
 /* @truss p:4000 c:pt0 */
-.pt0 { padding-top: 0px; }
+.pt0 { padding-top: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pt1 */
-.pt1 { padding-top: 8px; }
+.pt1 { padding-top: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pt2 */
-.pt2 { padding-top: 16px; }
+.pt2 { padding-top: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pt3 */
-.pt3 { padding-top: 24px; }
+.pt3 { padding-top: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pt_12px */
 .pt_12px { padding-top: 12px; }
 /* @truss p:4000 c:pt_25px */
@@ -897,19 +902,19 @@
 /* @truss p:4000 c:r_0 */
 .r_0 { right: 0; }
 /* @truss p:4000 c:right0 */
-.right0 { right: 0px; }
+.right0 { right: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:right1 */
-.right1 { right: 8px; }
+.right1 { right: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:right3 */
-.right3 { right: 24px; }
+.right3 { right: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:right_12px */
 .right_12px { right: 12px; }
 /* @truss p:4000 c:top0 */
-.top0 { top: 0px; }
+.top0 { top: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:top1 */
-.top1 { top: 8px; }
+.top1 { top: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:top3 */
-.top3 { top: 24px; }
+.top3 { top: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:top_2px */
 .top_2px { top: 2px; }
 /* @truss p:4000 c:top_48px */
@@ -923,7 +928,7 @@
 /* @truss p:4000 c:w100 */
 .w100 { width: 100%; }
 /* @truss p:4000 c:w2 */
-.w2 { width: 16px; }
+.w2 { width: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:w50 */
 .w50 { width: 50%; }
 /* @truss p:4000 c:w_10px */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "type": "module",
   "author": "Homebound",
   "license": "MIT",
@@ -89,7 +89,7 @@
     "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.3.0",
     "@homebound/rtl-utils": "^2.71.0",
-    "@homebound/truss": "^2.21.3",
+    "@homebound/truss": "2.24.0",
     "@homebound/tsconfig": "^1.1.1",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",