@hopper-ui/styled-system 1.2.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # @hopper-ui/styled-system
 
+## 2.0.1
+
+### Patch Changes
+
+- 8ad853b: Retro fitted active color tokens to ease with migrations, these will be deprecated eventually.
+
+## 2.0.0
+
+### Major Changes
+
+- c5c6b30: ## @hopper-ui/tokens
+
+  **Added**
+
+  | Token                                 |
+  | ------------------------------------- |
+  | danger-text-selected                  |
+  | danger-border-selected                |
+  | danger-icon-selected                  |
+  | danger-icon-weak-hover                |
+  | danger-icon-weak-press                |
+  | danger-surface-selected               |
+  | danger-surface-weak-hover             |
+  | danger-surface-weak-press             |
+  | danger-text-weak-hover                |
+  | danger-text-weak-press                |
+  | decorative-option5-surface-weak-hover |
+  | neutral-surface-weak-selected         |
+  | neutral-surface-weakest-selected      |
+  | neutral-border-selected               |
+  | neutral-icon-selected                 |
+  | neutral-icon-strong-hover             |
+  | neutral-icon-weak-press               |
+  | neutral-surface-selected              |
+  | neutral-text-weak-hover               |
+  | neutral-text-weak-press               |
+  | primary-border-selected               |
+  | primary-icon-selected                 |
+  | primary-surface-selected              |
+  | primary-surface-strong-selected       |
+  | primary-surface-weak-hover            |
+  | primary-surface-weak-press            |
+  | primary-text-selected                 |
+  | upsell-border-selected                |
+  | upsell-icon-selected                  |
+  | upsell-icon-hover                     |
+  | upsell-icon-weak-hover                |
+  | upsell-icon-weak-press                |
+  | upsell-surface-selected               |
+  | upsell-surface-weak-hover             |
+  | upsell-surface-weak-press             |
+  | upsell-text-selected                  |
+  | upsell-text-weak                      |
+  | upsell-text-weak-hover                |
+  | upsell-text-weak-press                |
+
+  **Renamed**
+
+  Use this as a reference to fix all breaking changes.
+
+  | Old Token name                | New Token name               |
+  | ----------------------------- | ---------------------------- |
+  | danger-border-active          | danger-border-press          |
+  | danger-icon-active            | danger-icon-press            |
+  | danger-text-active            | danger-text-press            |
+  | danger-surface-active         | danger-surface-press         |
+  | neutral-border-active         | neutral-border-press         |
+  | neutral-icon-active           | neutral-icon-press           |
+  | neutral-surface-active        | neutral-surface-press        |
+  | neutral-surface-weak-active   | neutral-surface-weak-press   |
+  | neutral-text-active           | neutral-text-press           |
+  | primary-border-active         | primary-border-press         |
+  | primary-icon-active           | primary-icon-press           |
+  | primary-surface-active        | primary-surface-press        |
+  | primary-text-active           | primary-text-press           |
+  | primary-surface-strong-active | primary-surface-strong-press |
+  | upsell-border-active          | upsell-border-press          |
+  | upsell-icon-active            | upsell-icon-press            |
+  | upsell-surface-active         | upsell-surface-press         |
+  | upsell-text-active            | upsell-text-press            |
+
+  **Updated**
+
+  | Token                        |
+  | ---------------------------- |
+  | danger-surface-hover         |
+  | danger-surface-strong        |
+  | danger-surface-strong-hover  |
+  | danger-text-weak             |
+  | status-progress-text         |
+  | status-progress-icon         |
+  | primary-surface-strong-hover |
+  | primary-text                 |
+  | primary-surface-hover        |
+  | upsell-surface-hover         |
+  | upsell-surface-weak          |
+  | upsell-text                  |
+  | upsell-icon                  |
+  | upsell-text-hover            |
+
+  ## @hopper-ui/components
+
+  - Added a press state to Links
+  - Added a press state to Buttons
+  - Added a press state to Checkbbox
+  - Added a press state to Switch
+  - Added a press state to Radio
+  - Added numerous tests to test Pressed States of components
+
 ## 1.2.0
 
 ### Minor 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___Zqeu5:hover {
+.UseStyledSystem-module__hop-b-hover___7beCa:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___a1mz8:hover {
+.UseStyledSystem-module__hop-bb-hover___sjc-o:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___BVwnM:hover {
+.UseStyledSystem-module__hop-bl-hover___kLkuA:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___hTuCm:hover {
+.UseStyledSystem-module__hop-br-hover___K-EIQ:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___adE7m:hover {
+.UseStyledSystem-module__hop-bt-hover___oRCTK:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___DfUJn:focus-visible {
+.UseStyledSystem-module__hop-b-focus___EJlgQ:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___axUzQ:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___it6DZ:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___AHFjp:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___N5Da-:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___5mdx8:focus-visible {
+.UseStyledSystem-module__hop-br-focus___jbce-:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___ybiFb:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___YZI-l:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___BU6Oj:active {
+.UseStyledSystem-module__hop-b-active___E5jrv:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___pFoxa:active {
+.UseStyledSystem-module__hop-bb-active___-nDNr:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___ueWsf:active {
+.UseStyledSystem-module__hop-bl-active___y7kuR:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___sBjPX:active {
+.UseStyledSystem-module__hop-br-active___MWItF:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___ldKxI:active {
+.UseStyledSystem-module__hop-bt-active___SpvZl:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___Gzm9t:hover {
+.UseStyledSystem-module__hop-bg-hover___NzrYM:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___jIrSB:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___yNcFv:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___fafHA:active {
+.UseStyledSystem-module__hop-bg-active___0jxjX:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___Zoiej:hover {
+.UseStyledSystem-module__hop-bs-hover___JyGqG:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___Ojcth:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___msxJy:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___8gnFg:active {
+.UseStyledSystem-module__hop-bs-active___qBFjv:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___Q88Tg:hover {
+.UseStyledSystem-module__hop-c-hover___Y8hIV:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___Vyuyv:focus-visible {
+.UseStyledSystem-module__hop-c-focus___FafgY:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___UquV3:active {
+.UseStyledSystem-module__hop-c-active___A2lPI:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___GqEOP:hover {
+.UseStyledSystem-module__hop-cs-hover___oMtJX:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___7EKmX:hover {
+.UseStyledSystem-module__hop-f-hover___oRByO:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___k-Xh5:focus-visible {
+.UseStyledSystem-module__hop-f-focus___JrRbQ:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___bSfTb:hover {
+.UseStyledSystem-module__hop-o-hover___s67Ok:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___92q-T:focus-visible {
+.UseStyledSystem-module__hop-o-focus___pd95u:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___qojJF:active {
+.UseStyledSystem-module__hop-o-active___HqbZe:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___U-dIO:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___OajYd: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__hop-HtmlElement___g-x90),
-:where(.htmlElement-module__hop-HtmlElement___g-x90::after),
-:where(.htmlElement-module__hop-HtmlElement___g-x90::before) {
+:where(.htmlElement-module__hop-HtmlElement___jov6a),
+:where(.htmlElement-module__hop-HtmlElement___jov6a::after),
+:where(.htmlElement-module__hop-HtmlElement___jov6a::before) {
   box-sizing: border-box;
 }

package/dist/StyledSystemProvider.d.ts

@@ -21,15 +21,18 @@ interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
     withBodyStyle?: boolean;
     /**
      * The color scheme to use.
+     * @default "light"
      */
     colorScheme: ColorSchemeOrSystem;
     /**
      * Default color scheme to use when a user preferred color scheme (system) is not available.
+     * @default "light"
      */
     defaultColorScheme?: ColorScheme;
     /**
      * Determines whether token CSS variables should be added to the document's head
      * By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` files
+     * @default true
     */
     withCssVariables?: boolean;
 }

package/dist/StyledSystemProvider.js

@@ -1,26 +1,26 @@
-export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-RKTVEOXM.js';
-import './chunk-J2UW6IZ5.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-JSOM3YJJ.js';
+import './chunk-VTGIKL3T.js';
 import './chunk-3YM73BQP.js';
-import './chunk-B6ZBFYWJ.js';
-import './chunk-EJR6CH3T.js';
-import './chunk-LCW3QCQQ.js';
-import './chunk-MCUHAIA4.js';
-import './chunk-ZDENFQ6H.js';
-import './chunk-45MYTH4M.js';
-import './chunk-E2EGUGKS.js';
-import './chunk-JKXZGQAL.js';
+import './chunk-6IPAN22Z.js';
+import './chunk-6KT6K6NI.js';
+import './chunk-KOWHTPQC.js';
+import './chunk-GXUFWEP5.js';
+import './chunk-BUQLB5H6.js';
+import './chunk-CFIMNXX5.js';
+import './chunk-LKOZVSXD.js';
+import './chunk-4E7VQIC5.js';
 import './chunk-RIORU7JO.js';
 import './chunk-YPIK2HRL.js';
-import './chunk-GFXIV6J4.js';
-import './chunk-TSYETPJT.js';
-import './chunk-DRFY5W7M.js';
-import './chunk-KKVEOD5L.js';
+import './chunk-3KPNXG7H.js';
+import './chunk-KQGCMT5E.js';
+import './chunk-NJIDLCB7.js';
+import './chunk-FAICHNEU.js';
 import './chunk-SFOVKOPG.js';
 import './chunk-VBKLISDI.js';
 import './chunk-XUHDFZZL.js';
 import './chunk-U5R6ZXH3.js';
 import './chunk-QMDDVBCZ.js';
-import './chunk-KLNF34G6.js';
-import './chunk-M4X2T3D3.js';
+import './chunk-5U5IRAPA.js';
+import './chunk-T6JS7L6B.js';
 import './chunk-V7X6ANEM.js';
-import './chunk-6LX4VMOV.js';
+import './chunk-2UOTJGT6.js';

package/dist/chunk-2UOTJGT6.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+
+export { __privateAdd, __privateGet, __privateSet, __publicField };

package/dist/{chunk-GFXIV6J4.js → chunk-3KPNXG7H.js}

@@ -2,7 +2,7 @@
 var package_default = {
   name: "@hopper-ui/styled-system",
   author: "Workleap",
-  version: "1.2.0",
+  version: "2.0.1",
   description: "The styled-system package.",
   license: "Apache-2.0",
   repository: {
@@ -40,39 +40,41 @@ var package_default = {
     test: "jest"
   },
   peerDependencies: {
-    react: "*",
-    "react-dom": "*"
+    react: "^18",
+    "react-dom": "^18"
   },
   dependencies: {
-    "@react-aria/ssr": "^3.9.2",
-    clsx: "^2.1.0"
+    "@react-aria/ssr": "^3.9.4",
+    clsx: "^2.1.1"
   },
   devDependencies: {
     "@hopper-ui/tokens": "workspace:*",
-    "@swc/core": "1.4.8",
-    "@swc/helpers": "0.5.7",
+    "@swc/core": "1.5.25",
+    "@swc/helpers": "0.5.11",
     "@swc/jest": "0.2.36",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.2",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "16.0.0",
     "@types/jest": "29.5.12",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
-    "@types/react-test-renderer": "18.0.7",
-    "@workleap/eslint-plugin": "3.1.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@types/react-test-renderer": "18.3.0",
+    "@workleap/eslint-plugin": "3.2.2",
     "@workleap/swc-configs": "2.2.3",
-    "@workleap/tsup-configs": "3.0.4",
+    "@workleap/tsup-configs": "3.0.6",
     "@workleap/typescript-configs": "3.0.2",
+    eslint: "8.57.0",
     "identity-obj-proxy": "3.0.0",
     jest: "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    postcss: "8.4.37",
+    "jest-fail-on-console": "3.3.0",
+    postcss: "8.4.38",
     "postcss-modules": "6.0.0",
-    react: "18.2.0",
-    "react-dom": "18.2.0",
-    "react-test-renderer": "18.2.0",
-    "ts-jest": "29.1.2",
-    tsup: "8.0.2",
-    typescript: "5.4.2"
+    react: "18.3.1",
+    "react-dom": "18.3.1",
+    "react-test-renderer": "18.3.1",
+    "ts-jest": "29.1.4",
+    tsup: "8.1.0",
+    typescript: "5.4.5"
   }
 };