@hopper-ui/styled-system 3.1.0 → 3.1.2

package/dist/theme/generated/workleap/light.css

@@ -2,7 +2,15 @@
  * This file is generated by Style Dictionary. Do not edit directly.
  */
 
-.hop-5-1-0-workleap {
+.hop-5-1-2-workleap {
+  --hop-comp-button-ghost-disabled-border-color: transparent;
+  --hop-comp-button-ghost-disabled-background-color: transparent;
+  --hop-comp-button-ghost-danger-border-color: transparent;
+  --hop-comp-button-ghost-danger-background-color: transparent;
+  --hop-comp-button-ghost-secondary-border-color: transparent;
+  --hop-comp-button-ghost-secondary-background-color: transparent;
+  --hop-comp-button-ghost-primary-border-color: transparent;
+  --hop-comp-button-ghost-primary-background-color: transparent;
   --hop-overline-bottom-offset: -0.25rem;
   --hop-overline-top-offset: -0.25rem;
   --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -513,7 +521,13 @@
   --hop-coastal-75: #bae6ff;
   --hop-coastal-50: #d9efff;
   --hop-coastal-25: #f0f8ff;
-  --hop-comp-button-border-color: var(--hop-amanita-500);
+  --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
+  --hop-comp-button-ghost-secondary-box-shadow: var(--hop-shadow-none);
+  --hop-comp-button-ghost-primary-box-shadow: var(--hop-shadow-none);
+  --hop-comp-button-danger-box-shadow: var(--hop-shadow-none);
+  --hop-comp-button-upsell-box-shadow: var(--hop-shadow-none);
+  --hop-comp-button-secondary-box-shadow: var(--hop-shadow-none);
+  --hop-comp-button-primary-box-shadow: var(--hop-shadow-none);
   --hop-shape-rounded-sm: var(--hop-border-radius-1);
   --hop-shape-rounded-md: var(--hop-border-radius-2);
   --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1218,4 +1232,106 @@
   --hop-space-stack-md: var(--hop-space-160);
   --hop-space-stack-sm: var(--hop-space-80);
   --hop-space-stack-xs: var(--hop-space-40);
+  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
+  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
+  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
+  --hop-comp-field-icon-color-press: var(--hop-neutral-icon-press);
+  --hop-comp-field-icon-color-hover: var(--hop-neutral-icon-hover);
+  --hop-comp-field-icon-color: var(--hop-neutral-icon);
+  --hop-comp-field-text-color-error: var(--hop-danger-text-weak);
+  --hop-comp-field-text-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-comp-field-text-color: var(--hop-neutral-text);
+  --hop-comp-field-border-color-disabled: var(--hop-neutral-border-disabled);
+  --hop-comp-field-border-color-error: var(--hop-danger-border-strong);
+  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
+  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
+  --hop-comp-field-border-color: var(--hop-neutral-border);
+  --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --hop-comp-field-background-color-focus: var(--hop-neutral-surface);
+  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-field-background-color: var(--hop-neutral-surface);
+  --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
+  --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
+  --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
+  --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
+  --hop-comp-button-disabled-text-color: var(--hop-neutral-text-disabled);
+  --hop-comp-button-ghost-danger-border-color-selected: var(--hop-danger-surface-weak-press);
+  --hop-comp-button-ghost-danger-border-color-pressed: var(--hop-danger-surface-weak-press);
+  --hop-comp-button-ghost-danger-border-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
+  --hop-comp-button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
+  --hop-comp-button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
+  --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
+  --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
+  --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
+  --hop-comp-button-ghost-secondary-border-color-selected: var(--hop-neutral-surface-press);
+  --hop-comp-button-ghost-secondary-border-color-pressed: var(--hop-neutral-surface-press);
+  --hop-comp-button-ghost-secondary-border-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
+  --hop-comp-button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
+  --hop-comp-button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
+  --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
+  --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
+  --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
+  --hop-comp-button-ghost-primary-border-color-selected: var(--hop-primary-surface-weak-press);
+  --hop-comp-button-ghost-primary-border-color-pressed: var(--hop-primary-surface-weak-press);
+  --hop-comp-button-ghost-primary-border-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-press);
+  --hop-comp-button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
+  --hop-comp-button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
+  --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
+  --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
+  --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
+  --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
+  --hop-comp-button-danger-border-color-pressed: var(--hop-danger-surface-press);
+  --hop-comp-button-danger-border-color-hover: var(--hop-danger-surface-strong-hover);
+  --hop-comp-button-danger-border-color: var(--hop-danger-surface-strong);
+  --hop-comp-button-danger-background-color-selected: var(--hop-danger-surface-selected);
+  --hop-comp-button-danger-background-color-pressed: var(--hop-danger-surface-press);
+  --hop-comp-button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
+  --hop-comp-button-danger-background-color: var(--hop-danger-surface-strong);
+  --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
+  --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
+  --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
+  --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
+  --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
+  --hop-comp-button-upsell-border-color-pressed: var(--hop-upsell-surface-weak-press);
+  --hop-comp-button-upsell-border-color-hover: var(--hop-upsell-surface-weak-hover);
+  --hop-comp-button-upsell-border-color: var(--hop-upsell-surface-weak);
+  --hop-comp-button-upsell-background-color-selected: var(--hop-upsell-surface-selected);
+  --hop-comp-button-upsell-background-color-pressed: var(--hop-upsell-surface-weak-press);
+  --hop-comp-button-upsell-background-color-hover: var(--hop-upsell-surface-weak-hover);
+  --hop-comp-button-upsell-background-color: var(--hop-upsell-surface-weak);
+  --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
+  --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-press);
+  --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
+  --hop-comp-button-upsell-text-color: var(--hop-upsell-text);
+  --hop-comp-button-secondary-border-color-selected: var(--hop-neutral-border-selected);
+  --hop-comp-button-secondary-border-color-pressed: var(--hop-neutral-border-strong);
+  --hop-comp-button-secondary-border-color-hover: var(--hop-neutral-border-strong-hover);
+  --hop-comp-button-secondary-border-color: var(--hop-neutral-border-strong);
+  --hop-comp-button-secondary-background-color-selected: var(--hop-neutral-surface-selected);
+  --hop-comp-button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
+  --hop-comp-button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-button-secondary-background-color: var(--hop-neutral-surface);
+  --hop-comp-button-secondary-text-color-selected: var(--hop-neutral-text-selected);
+  --hop-comp-button-secondary-text-color-pressed: var(--hop-neutral-text-press);
+  --hop-comp-button-secondary-text-color-hover: var(--hop-neutral-text-hover);
+  --hop-comp-button-secondary-text-color: var(--hop-neutral-text);
+  --hop-comp-button-primary-border-color-selected: var(--hop-primary-border-selected);
+  --hop-comp-button-primary-border-color-pressed: var(--hop-primary-surface-strong-press);
+  --hop-comp-button-primary-border-color-hover: var(--hop-primary-surface-strong-hover);
+  --hop-comp-button-primary-border-color: var(--hop-primary-surface-strong);
+  --hop-comp-button-primary-background-color-selected: var(--hop-primary-surface-selected);
+  --hop-comp-button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
+  --hop-comp-button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
+  --hop-comp-button-primary-background-color: var(--hop-primary-surface-strong);
+  --hop-comp-button-primary-text-color-selected: var(--hop-primary-text-selected);
+  --hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
+  --hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
+  --hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
+  --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
 }

package/dist/tokens/generated/styledSystemConstants.d.ts

@@ -1,5 +1,5 @@
 declare const HopperRootCssClass = "hop";
-declare const StyledSystemRootCssClass = "hop-5-1-0";
+declare const StyledSystemRootCssClass = "hop-5-1-2";
 declare const HopperVariablePrefix = "--hop";
 type Theme = "sharegate" | "workleap";
 

package/dist/tokens/generated/styledSystemConstants.js

@@ -1,2 +1,2 @@
-export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from '../../chunk-WNTAV75B.js';
+export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from '../../chunk-P6K4QWFZ.js';
 import '../../chunk-AQ5VUG5P.js';

package/dist/tokens/tokenMappings.js

@@ -1,8 +1,8 @@
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, DefaultOutlineWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, OutlineMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from '../chunk-Z2SZ7OME.js';
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, DefaultOutlineWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, OutlineMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from '../chunk-DK6ALTKA.js';
 import '../chunk-LMCQIGNN.js';
 import '../chunk-FTYK7Z7Q.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-VBKLISDI.js';
 import '../chunk-XUHDFZZL.js';
-import '../chunk-WNTAV75B.js';
+import '../chunk-P6K4QWFZ.js';
 import '../chunk-AQ5VUG5P.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___mzjcr:hover {
+.UseStyledSystem-module__hop-b-hover___3qg2D:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___AYc2V:hover {
+.UseStyledSystem-module__hop-bb-hover___Ow8FC:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___x7qfo:hover {
+.UseStyledSystem-module__hop-bl-hover___q1F-d:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___Bu4ij:hover {
+.UseStyledSystem-module__hop-br-hover___IjU-o:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___SPCRZ:hover {
+.UseStyledSystem-module__hop-bt-hover___SU74N:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___SM7L2:focus-visible {
+.UseStyledSystem-module__hop-b-focus___Uk9bI:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___qLeXi:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___oDb0i:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___GEjY7:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___KZG5L:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___Iz9ua:focus-visible {
+.UseStyledSystem-module__hop-br-focus___6b4nT:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___hWScg:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___YhJgI:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___igJ1y:active {
+.UseStyledSystem-module__hop-b-active___809QG:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___tDgEe:active {
+.UseStyledSystem-module__hop-bb-active___w-D6A:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___YmLdJ:active {
+.UseStyledSystem-module__hop-bl-active___fuTob:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___MnX2H:active {
+.UseStyledSystem-module__hop-br-active___lYFVR:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___PAo7D:active {
+.UseStyledSystem-module__hop-bt-active___pVeTC:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___gIL-g:hover {
+.UseStyledSystem-module__hop-bg-hover___NHRAh:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___sThCZ:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___6UnSg:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___qud9J:active {
+.UseStyledSystem-module__hop-bg-active___K62gP:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___vE3A7:hover {
+.UseStyledSystem-module__hop-bs-hover___ichHs:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___l8OPU:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___8CVJT:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___F9fGa:active {
+.UseStyledSystem-module__hop-bs-active___6fGpC:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___B7zX-:hover {
+.UseStyledSystem-module__hop-c-hover___yV0Bm:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___73vPm:focus-visible {
+.UseStyledSystem-module__hop-c-focus___CB-a1:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___MKO7K:active {
+.UseStyledSystem-module__hop-c-active___QvV-8:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___LHFnV:hover {
+.UseStyledSystem-module__hop-cs-hover___r20db:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___4YPgm:hover {
+.UseStyledSystem-module__hop-f-hover___5l7CU:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___VEgbj:focus-visible {
+.UseStyledSystem-module__hop-f-focus___Pp0fo:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___RHLYe:hover {
+.UseStyledSystem-module__hop-o-hover___vLrHu:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___v1oZt:focus-visible {
+.UseStyledSystem-module__hop-o-focus___bnDab:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___CKsCb:active {
+.UseStyledSystem-module__hop-o-active___XjSgf:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___f4qQN:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___pr646:focus-visible {
   --hop-ol-focus: initial;
   outline: var(--hop-ol-focus) !important;
 }

package/dist/useStyledSystem.js

@@ -1,10 +1,10 @@
-export { isStyledSystemProp, useStyledSystem } from './chunk-LHB7KW6V.js';
-import './chunk-Z2SZ7OME.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-SPRWM2SC.js';
+import './chunk-DK6ALTKA.js';
 import './chunk-LMCQIGNN.js';
 import './chunk-FTYK7Z7Q.js';
 import './chunk-U5R6ZXH3.js';
 import './chunk-VBKLISDI.js';
 import './chunk-XUHDFZZL.js';
 import './chunk-QMDDVBCZ.js';
-import './chunk-WNTAV75B.js';
+import './chunk-P6K4QWFZ.js';
 import './chunk-AQ5VUG5P.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/styled-system",
   "author": "Workleap",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "The styled-system package.",
   "license": "Apache-2.0",
   "repository": {
@@ -74,7 +74,7 @@
     "tsup": "8.5.0",
     "typescript": "5.5.4",
     "typescript-eslint": "8.46.2",
-    "@hopper-ui/tokens": "5.1.0"
+    "@hopper-ui/tokens": "5.1.2"
   },
   "scripts": {
     "dev": "tsup --config ./tsup.dev.ts",