@hopper-ui/styled-system 0.2.8 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hopper-ui/styled-system
 
+## 1.0.0
+
+### Major Changes
+
+- 93a1a16: - Changed the useStyledSystem hook to return an object containing the className and the style, instead of merging it with the input props.
+  - Added some sizing options while we wait for the sizing tokens
+
+## 0.3.0
+
+### Minor Changes
+
+- aa5d10b: Added font fallback to font tokens
+
 ## 0.2.8
 
 ### Patch Changes

package/dist/StyledSystemProvider.css

@@ -1,132 +1,132 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___PCiT6:hover {
+.UseStyledSystem-module__hop-b-hover___71ep8:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___lTydY:hover {
+.UseStyledSystem-module__hop-bb-hover___ylhBC:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___jMTE-:hover {
+.UseStyledSystem-module__hop-bl-hover___TO68v:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___bJ83o:hover {
+.UseStyledSystem-module__hop-br-hover___BcsdD:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___eDPfm:hover {
+.UseStyledSystem-module__hop-bt-hover___cy3wM:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___sGCIR:focus-visible {
+.UseStyledSystem-module__hop-b-focus___tmnq6:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___eHDgZ:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___G-HZ8:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___oVWyr:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___kGmWM:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___m4ZZI:focus-visible {
+.UseStyledSystem-module__hop-br-focus___dUPR-:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___XT0JW:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___Hrlw3:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___xKyzt:active {
+.UseStyledSystem-module__hop-b-active___dHtWO:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___9vrWq:active {
+.UseStyledSystem-module__hop-bb-active___Egybw:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___qbrLo:active {
+.UseStyledSystem-module__hop-bl-active___jqw-D:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___aRmLI:active {
+.UseStyledSystem-module__hop-br-active___ysPGE:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___75-yZ:active {
+.UseStyledSystem-module__hop-bt-active___C7xuD:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___BAsJt:hover {
+.UseStyledSystem-module__hop-bg-hover___1W2CI:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___wmDkz:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___GQNcd:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___l4tex:active {
+.UseStyledSystem-module__hop-bg-active___Bo-0I:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___o6LSh:hover {
+.UseStyledSystem-module__hop-bs-hover___Z1cKa:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___6nNJH:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___tBUac:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___d7Ec-:active {
+.UseStyledSystem-module__hop-bs-active___mkrRd:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___uveCx:hover {
+.UseStyledSystem-module__hop-c-hover___wiNSV:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___bYVxt:focus-visible {
+.UseStyledSystem-module__hop-c-focus___59TkO:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___pSKRG:active {
+.UseStyledSystem-module__hop-c-active___H8-u-:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___rLWvX:hover {
+.UseStyledSystem-module__hop-cs-hover___igsh7:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___WhWFr:hover {
+.UseStyledSystem-module__hop-f-hover___1Xk9j:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___YVEAE:focus-visible {
+.UseStyledSystem-module__hop-f-focus___Ib-hw:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___Fz6bG:hover {
+.UseStyledSystem-module__hop-o-hover___gzbqv:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___Qj2Lh:focus-visible {
+.UseStyledSystem-module__hop-o-focus___Pmoy-:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___cm3NT:active {
+.UseStyledSystem-module__hop-o-active___eu716:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___TQMP-:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___aURRZ:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
-:where(.htmlElement-module__html-element___X3XT3),
-:where(.htmlElement-module__html-element___X3XT3::after),
-:where(.htmlElement-module__html-element___X3XT3::before) {
+:where(.htmlElement-module__html-element___f3WYL),
+:where(.htmlElement-module__html-element___f3WYL::after),
+:where(.htmlElement-module__html-element___f3WYL::before) {
   box-sizing: border-box;
 }

package/dist/StyledSystemProvider.d.ts

@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 import { ColorSchemeOrSystem, ColorScheme } from './color-scheme/ColorSchemeContext.js';
 import { DivProps } from './html-wrappers/html.js';
 import { BreakpointProviderProps } from './responsive/BreakpointProvider.js';
-import './html-wrappers/htmlElement.js';
 import './styled-system-props.js';
 import 'csstype';
 import './responsive/useResponsiveValue.js';
@@ -11,6 +10,7 @@ import './responsive/Breakpoints.js';
 import './tokens/token-mappings.js';
 import 'react/jsx-runtime';
 
+declare const GlobalStyledSystemProviderCssSelector = "hop-StyledSystemProvider";
 interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
     /** The children of the component */
     children: ReactNode;
@@ -41,4 +41,4 @@ interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
  */
 declare const _StyledSystemProvider: react.ForwardRefExoticComponent<Omit<StyledSystemProviderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-export { _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };

package/dist/StyledSystemProvider.js

@@ -1,19 +1,19 @@
-export { _StyledSystemProvider as StyledSystemProvider } from './chunk-4W2Y5NP7.js';
-import './chunk-QM2KKTRJ.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-36LPB7RX.js';
+import './chunk-HPTCF3O5.js';
 import './chunk-3YM73BQP.js';
 import './chunk-B6ZBFYWJ.js';
-import './chunk-C2ZCLERY.js';
-import './chunk-B6X5QHOR.js';
+import './chunk-XISFZQD3.js';
+import './chunk-RG533UHT.js';
 import './chunk-MCUHAIA4.js';
-import './chunk-6QQ7EFT3.js';
-import './chunk-4YLLB6OG.js';
+import './chunk-7WKPFXQZ.js';
+import './chunk-TAIACQMV.js';
 import './chunk-ZKEMKHXY.js';
-import './chunk-AGTKHWTQ.js';
+import './chunk-3IK64CCG.js';
 import './chunk-RIORU7JO.js';
 import './chunk-YPIK2HRL.js';
-import './chunk-ZAVRK5U2.js';
-import './chunk-7DJQGTVY.js';
-import './chunk-T2LQYER5.js';
+import './chunk-Y6PI5JPG.js';
+import './chunk-IZYWFDT7.js';
+import './chunk-ACHT4RXQ.js';
 import './chunk-PCGVOTW3.js';
 import './chunk-SFOVKOPG.js';
 import './chunk-VBKLISDI.js';

package/dist/{chunk-4W2Y5NP7.js → chunk-36LPB7RX.js}

@@ -1,8 +1,8 @@
-import { BodyStyleProvider } from './chunk-QM2KKTRJ.js';
-import { Div } from './chunk-C2ZCLERY.js';
+import { BodyStyleProvider } from './chunk-HPTCF3O5.js';
+import { Div } from './chunk-XISFZQD3.js';
 import { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-MCUHAIA4.js';
-import { TokenProvider } from './chunk-6QQ7EFT3.js';
-import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
+import { TokenProvider } from './chunk-7WKPFXQZ.js';
+import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
 import { useColorScheme } from './chunk-KLNF34G6.js';
 import { ColorSchemeContext } from './chunk-V7X6ANEM.js';
 import clsx from 'clsx';
@@ -52,4 +52,4 @@ var StyledSystemProvider = (props, ref) => {
 var _StyledSystemProvider = forwardRef(StyledSystemProvider);
 _StyledSystemProvider.displayName = "StyledSystemProvider";
 
-export { _StyledSystemProvider };
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider };

package/dist/{chunk-AGTKHWTQ.js → chunk-3IK64CCG.js}

@@ -139,9 +139,9 @@ var CoreTokens = {
   "--hop-shadow-sm": "0 1px 6px 0 rgba(60, 60, 60, 0.10)",
   "--hop-shadow-md": "0 4px 10px 4px rgba(60, 60, 60, 0.08)",
   "--hop-shadow-lg": "0 10px 18px 8px rgba(60, 60, 60, 0.08)",
-  "--hop-font-family-primary": "ABC Favorit",
-  "--hop-font-family-secondary": "Inter",
-  "--hop-font-family-tertiary": "ABC Favorit Mono",
+  "--hop-font-family-primary": "'ABC Favorit', Helvetica, Arial, sans-serif",
+  "--hop-font-family-secondary": "'Inter', Helvetica, Arial, sans-serif",
+  "--hop-font-family-tertiary": "'ABC Favorit Mono', Consolas, 'SF Mono', monospace",
   "--hop-font-size-120": "0.75rem",
   "--hop-font-size-140": "0.875rem",
   "--hop-font-size-160": "1rem",

package/dist/{chunk-6QQ7EFT3.js → chunk-7WKPFXQZ.js}

@@ -1,6 +1,6 @@
-import { Tokens } from './chunk-4YLLB6OG.js';
+import { Tokens } from './chunk-TAIACQMV.js';
 import { useInsertStyleElement } from './chunk-RIORU7JO.js';
-import { StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
+import { StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
 
 // src/tokens/TokenProvider.tsx
 function TokenProvider() {

package/dist/{chunk-T2LQYER5.js → chunk-ACHT4RXQ.js}

@@ -1,6 +1,6 @@
 import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-PCGVOTW3.js';
 import { parseResponsiveValue } from './chunk-SFOVKOPG.js';
-import { isNil } from './chunk-U5R6ZXH3.js';
+import { isNil, isObject } from './chunk-U5R6ZXH3.js';
 
 // src/tokens/token-mappings.ts
 var ColorExpressionTypes = [
@@ -51,7 +51,9 @@ var FontWeightMapping = createMapping(FontWeight);
 var LineHeightMapping = createMapping(LineHeight);
 var FontFamilyMapping = createMapping(FontFamily);
 var BorderRadiusMapping = createMapping(Shape);
-var SpaceMapping = createMapping(CoreSpace);
+var SpaceMapping = {
+  ...createMapping(CoreSpace)
+};
 var SimplePaddingMapping = {
   ...createMapping(SemanticSimplePaddingSpace),
   ...SpaceMapping
@@ -69,22 +71,61 @@ var ComplexMarginMapping = {
   ...createMapping(SemanticComplexMarginSpace)
 };
 var SizingMapping = {
-  ...SpaceMapping
-  // TODO: Sizing scale still missing, only core tokens are available at the moment
+  ...SpaceMapping,
+  // tailwind like values for scaling since we don't have scale tokens
+  "100vw": "100vw",
+  "100svw": "100svw",
+  "100lvw": "100lvw",
+  "100dvw": "100dvw",
+  "100vh": "100vh",
+  "100svh": "100svh",
+  "100lvh": "100lvh",
+  "100dvh": "100dvh",
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%"
 };
 function parseResponsiveSystemValue(value, systemValues, matchedBreakpoints) {
   if (isNil(value)) {
     return value;
   }
-  const systemValue = getSystemValue(value, systemValues);
-  if (!isNil(systemValue)) {
-    return systemValue;
+  if (!isObject(value)) {
+    if (Array.isArray(value)) {
+      const systemValueArray = value.map((x) => getSystemValue(x, systemValues));
+      if (!isNil(systemValueArray) && systemValueArray.every((x) => !isNil(x))) {
+        return systemValueArray;
+      }
+    } else {
+      const systemValue = getSystemValue(value, systemValues);
+      if (!isNil(systemValue)) {
+        return systemValue;
+      }
+    }
   }
   const underlyingValue = parseResponsiveValue(value, matchedBreakpoints);
   if (!isNil(underlyingValue)) {
-    const underlyingSystemValue = getSystemValue(underlyingValue, systemValues);
-    if (!isNil(underlyingSystemValue)) {
-      return underlyingSystemValue;
+    if (Array.isArray(underlyingValue)) {
+      const underlyingSystemValue = underlyingValue.map((x) => getSystemValue(x, systemValues));
+      if (!isNil(underlyingSystemValue) && underlyingSystemValue.every((x) => !isNil(x))) {
+        return underlyingSystemValue;
+      }
+    } else {
+      const underlyingSystemValue = getSystemValue(underlyingValue, systemValues);
+      if (!isNil(underlyingSystemValue)) {
+        return underlyingSystemValue;
+      }
     }
   }
   return underlyingValue;
@@ -92,5 +133,8 @@ function parseResponsiveSystemValue(value, systemValues, matchedBreakpoints) {
 function getSystemValue(value, systemValues) {
   return systemValues[value];
 }
+function getSizingValue(value) {
+  return SizingMapping[value] || value;
+}
 
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue };
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue };

package/dist/{chunk-QM2KKTRJ.js → chunk-HPTCF3O5.js}

@@ -1,7 +1,7 @@
 import { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
 import { ThemeComputedStyle } from './chunk-B6ZBFYWJ.js';
 import { useInsertStyleElement } from './chunk-RIORU7JO.js';
-import { StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
+import { StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
 import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
 import { useRef, useState } from 'react';