@hopper-ui/styled-system 0.2.3 → 0.2.5

package/dist/styled-system-props.d.ts

@@ -910,7 +910,7 @@ interface StyledSystemProps {
      */
     UNSAFE_borderTopHover?: ResponsiveProp<UNSAFE_BorderValue>;
     /**
-     * Sets the `border-top-left-radius` property when hovered.
+     * Sets the `border-top-left-radius` property.
      *
      * If you want to use a **token value** from the **SCALE**, use the **`borderTopLeftRadius`** property instead.
      *
@@ -918,7 +918,7 @@ interface StyledSystemProps {
      */
     UNSAFE_borderTopLeftRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
     /**
-     * Sets the `border-top-right-radius` property when hovered.
+     * Sets the `border-top-right-radius` property.
      *
      * If you want to use a **token value** from the **SCALE**, use the **`borderTopRightRadius`** property instead.
      *
@@ -933,6 +933,30 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_boxShadow?: ResponsiveProp<UNSAFE_BoxShadowValue>;
+    /**
+     * Sets the `box-shadow` property when active.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`boxShadowActive`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_boxShadowActive?: ResponsiveProp<UNSAFE_BoxShadowValue>;
+    /**
+     * Sets the `box-shadow` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`boxShadowFocus`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_boxShadowFocus?: ResponsiveProp<UNSAFE_BoxShadowValue>;
+    /**
+     * Sets the `box-shadow` property when hovered.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`boxShadowHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_boxShadowHover?: ResponsiveProp<UNSAFE_BoxShadowValue>;
     /**
      * Sets the `color` property.
      *
@@ -941,6 +965,30 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_color?: ResponsiveProp<UNSAFE_ColorValue>;
+    /**
+     * Sets the `color` property when active.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`colorActive`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_colorActive?: ResponsiveProp<UNSAFE_ColorValue>;
+    /**
+     * Sets the `color` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`colorFocus`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_colorFocus?: ResponsiveProp<UNSAFE_ColorValue>;
+    /**
+     * Sets the `color` property when hovered.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`colorHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_colorHover?: ResponsiveProp<UNSAFE_ColorValue>;
     /**
      * Sets the `column-gap` property.
      *
@@ -957,6 +1005,22 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_fill?: ResponsiveProp<UNSAFE_FillValue>;
+    /**
+     * Sets the `fill` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`fillFocus`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_fillFocus?: ResponsiveProp<UNSAFE_FillValue>;
+    /**
+     * Sets the `fill` property when hovered.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`fillHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_fillHover?: ResponsiveProp<UNSAFE_FillValue>;
     /**
      * Sets the `font-family` property.
      *
@@ -1005,6 +1069,22 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_gridAutoRows?: ResponsiveProp<UNSAFE_GridAutoRowsValue>;
+    /**
+     * Sets the `grid-column-span` property.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`gridColumnSpan`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_gridColumnSpan?: ResponsiveProp<GridColumSpanValue>;
+    /**
+     * Sets the `grid-row-span` property.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`gridRowSpan`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_gridRowSpan?: ResponsiveProp<GridRowSpanValue>;
     /**
      * Sets the `grid-template-columns` property.
      *

package/dist/styled-system-root-css-class.js

@@ -1,2 +1,2 @@
-export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-JM7JTLPS.js';
+export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-R63UWTVG.js';
 import './chunk-JFESGV6Z.js';

package/dist/tokens/TokenProvider.js

@@ -1,9 +1,9 @@
-export { TokenProvider } from '../chunk-BEEGWFNF.js';
-import '../chunk-7KCN3W6N.js';
-import '../chunk-J4KAMS5Q.js';
-import '../chunk-Q3NLRNZN.js';
+export { TokenProvider } from '../chunk-6GS5PMAA.js';
+import '../chunk-A47SIZVA.js';
+import '../chunk-ZKEMKHXY.js';
+import '../chunk-HAB2KYRH.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-JM7JTLPS.js';
+import '../chunk-R63UWTVG.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-JFESGV6Z.js';

package/dist/tokens/generated/dark-semantic-tokens.d.ts

@@ -184,6 +184,7 @@ declare const DarkSemanticTokens: {
     "--hop-neutral-border-hover": string;
     "--hop-neutral-border-active": string;
     "--hop-neutral-surface-weak-hover": string;
+    "--hop-neutral-surface-weak-active": string;
     "--hop-neutral-border-weakest": string;
     "--hop-neutral-surface-weakest": string;
     "--hop-warning-icon-weakest": string;

package/dist/tokens/generated/dark-semantic-tokens.js

@@ -1,2 +1,2 @@
-export { DarkSemanticTokens } from '../../chunk-J4KAMS5Q.js';
+export { DarkSemanticTokens } from '../../chunk-ZKEMKHXY.js';
 import '../../chunk-JFESGV6Z.js';

package/dist/tokens/generated/light-semantic-tokens.d.ts

@@ -394,6 +394,7 @@ declare const SemanticTokens: {
     "--hop-neutral-border-hover": string;
     "--hop-neutral-border-active": string;
     "--hop-neutral-surface-weak-hover": string;
+    "--hop-neutral-surface-weak-active": string;
     "--hop-neutral-border-weakest": string;
     "--hop-neutral-surface-weakest": string;
     "--hop-warning-icon-weakest": string;

package/dist/tokens/generated/light-semantic-tokens.js

@@ -1,2 +1,2 @@
-export { CoreTokens, SemanticTokens } from '../../chunk-Q3NLRNZN.js';
+export { CoreTokens, SemanticTokens } from '../../chunk-HAB2KYRH.js';
 import '../../chunk-JFESGV6Z.js';

package/dist/tokens/generated/styled-system-to-token-mappings.d.ts

@@ -223,6 +223,7 @@ declare const BackgroundColors: {
     "neutral-strong": string;
     "neutral-hover": string;
     "neutral-weak-hover": string;
+    "neutral-weak-active": string;
     "neutral-weakest": string;
     warning: string;
     "warning-strong": string;

package/dist/tokens/generated/styled-system-to-token-mappings.js

@@ -1,2 +1,2 @@
-export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontSize, FontWeight, HopperColors, HopperVariablePrefix, IconColors, LineHeight, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-U3SI5QXV.js';
+export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontSize, FontWeight, HopperColors, HopperVariablePrefix, IconColors, LineHeight, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-PCGVOTW3.js';
 import '../../chunk-JFESGV6Z.js';

package/dist/tokens/token-mappings.d.ts

@@ -489,6 +489,7 @@ declare const BackgroundColorMapping: {
     "neutral-strong": string;
     "neutral-hover": string;
     "neutral-weak-hover": string;
+    "neutral-weak-active": string;
     "neutral-weakest": string;
     warning: string;
     "warning-strong": string;
@@ -1008,6 +1009,7 @@ declare const BorderMapping: {
     "neutral-strong": string;
     "neutral-hover": string;
     "neutral-weak-hover": string;
+    "neutral-weak-active": string;
     "neutral-weakest": string;
     warning: string;
     "warning-strong": string;

package/dist/tokens/token-mappings.js

@@ -1,7 +1,7 @@
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue } from '../chunk-KUUJ37DW.js';
-import '../chunk-U3SI5QXV.js';
-import '../chunk-GYREQTEK.js';
-import '../chunk-ZUVKM5DV.js';
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue } from '../chunk-T2LQYER5.js';
+import '../chunk-PCGVOTW3.js';
+import '../chunk-SFOVKOPG.js';
+import '../chunk-VBKLISDI.js';
 import '../chunk-XUHDFZZL.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-JFESGV6Z.js';

package/dist/tokens/tokens.d.ts

@@ -395,6 +395,7 @@ declare const Tokens: {
         "--hop-neutral-border-hover": string;
         "--hop-neutral-border-active": string;
         "--hop-neutral-surface-weak-hover": string;
+        "--hop-neutral-surface-weak-active": string;
         "--hop-neutral-border-weakest": string;
         "--hop-neutral-surface-weakest": string;
         "--hop-warning-icon-weakest": string;
@@ -1063,6 +1064,7 @@ declare const Tokens: {
         "--hop-neutral-border-hover": string;
         "--hop-neutral-border-active": string;
         "--hop-neutral-surface-weak-hover": string;
+        "--hop-neutral-surface-weak-active": string;
         "--hop-neutral-border-weakest": string;
         "--hop-neutral-surface-weakest": string;
         "--hop-warning-icon-weakest": string;

package/dist/tokens/tokens.js

@@ -1,4 +1,4 @@
-export { Tokens } from '../chunk-7KCN3W6N.js';
-import '../chunk-J4KAMS5Q.js';
-import '../chunk-Q3NLRNZN.js';
+export { Tokens } from '../chunk-A47SIZVA.js';
+import '../chunk-ZKEMKHXY.js';
+import '../chunk-HAB2KYRH.js';
 import '../chunk-JFESGV6Z.js';

package/dist/useStyledSystem.css

@@ -1,125 +1,125 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___WO7Si:hover {
+.UseStyledSystem-module__hop-b-hover___ELiam:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___J7koW:hover {
+.UseStyledSystem-module__hop-bb-hover___mZbsF:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___H6X11:hover {
+.UseStyledSystem-module__hop-bl-hover___ceyGf:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___2ecDN:hover {
+.UseStyledSystem-module__hop-br-hover___1koop:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___m-WBU:hover {
+.UseStyledSystem-module__hop-bt-hover___XYjzz:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___k8BIX:focus-visible {
+.UseStyledSystem-module__hop-b-focus___eKqPu:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___vY533:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___sLRKs:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___FMQH5:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___ql2vz:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___QOQgk:focus-visible {
+.UseStyledSystem-module__hop-br-focus___bOlUU:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___PGkY1:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___iUUrS:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___XYsR5:active {
+.UseStyledSystem-module__hop-b-active___qHy5D:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___48kbq:active {
+.UseStyledSystem-module__hop-bb-active___ZZKAA:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___49LJt:active {
+.UseStyledSystem-module__hop-bl-active___FCKS3:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___QGaMg:active {
+.UseStyledSystem-module__hop-br-active___o8t8T:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___4y2V1:active {
+.UseStyledSystem-module__hop-bt-active___GogIA:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___dUflJ:hover {
+.UseStyledSystem-module__hop-bg-hover___CTlws:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___RAUcc:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___iPjbs:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___3hBq4:active {
+.UseStyledSystem-module__hop-bg-active___8Fos8:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___iugX-:hover {
+.UseStyledSystem-module__hop-bs-hover___gLQZn:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___kk-Qr:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___VbuiX:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___X8-Nt:active {
+.UseStyledSystem-module__hop-bs-active___cTySx:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___pzags:hover {
+.UseStyledSystem-module__hop-c-hover___sziqQ:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___IgZlq:focus-visible {
+.UseStyledSystem-module__hop-c-focus___pLFyI:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___s2HIc:active {
+.UseStyledSystem-module__hop-c-active___GOSR5:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___q-t-p:hover {
+.UseStyledSystem-module__hop-cs-hover___F9NUH:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___PS8fe:hover {
+.UseStyledSystem-module__hop-f-hover___p0BS-:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___JOUzD:focus-visible {
+.UseStyledSystem-module__hop-f-focus___Fq-NB:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___NTBNQ:hover {
+.UseStyledSystem-module__hop-o-hover___KGrys:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___odjgO:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cGXdz:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___wrBCC:active {
+.UseStyledSystem-module__hop-o-active___qwlbA:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___dRdaA:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___9PPfW:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }

package/dist/useStyledSystem.js

@@ -1,8 +1,8 @@
-export { isStyledSystemProp, useStyledSystem } from './chunk-O7PTTVQH.js';
-import './chunk-KUUJ37DW.js';
-import './chunk-U3SI5QXV.js';
-import './chunk-GYREQTEK.js';
-import './chunk-ZUVKM5DV.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-RS5A44EK.js';
+import './chunk-T2LQYER5.js';
+import './chunk-PCGVOTW3.js';
+import './chunk-SFOVKOPG.js';
+import './chunk-VBKLISDI.js';
 import './chunk-XUHDFZZL.js';
 import './chunk-U5R6ZXH3.js';
 import './chunk-I37Y2R7V.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/styled-system",
   "author": "Workleap",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "The styled-system package.",
   "license": "Apache-2.0",
   "repository": {
@@ -67,7 +67,7 @@
     "tsup": "7.2.0",
     "type-fest": "4.7.1",
     "typescript": "5.2.2",
-    "@hopper-ui/tokens": "3.1.2"
+    "@hopper-ui/tokens": "3.1.3"
   },
   "scripts": {
     "dev": "tsup --config ./tsup.dev.ts",