@hopper-ui/styled-system 1.2.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @hopper-ui/styled-system
 
+## 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___Plz1Z:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___a1mz8:hover {
+.UseStyledSystem-module__hop-bb-hover___duyqg:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___BVwnM:hover {
+.UseStyledSystem-module__hop-bl-hover___SSZt0:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___hTuCm:hover {
+.UseStyledSystem-module__hop-br-hover___cc-cR:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___adE7m:hover {
+.UseStyledSystem-module__hop-bt-hover___vzXA1: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___hVIrm: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___f9mPE: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___xF6Bc: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___ptv3o: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___MNw8i: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___rWbbY:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___pFoxa:active {
+.UseStyledSystem-module__hop-bb-active___LX6qX:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___ueWsf:active {
+.UseStyledSystem-module__hop-bl-active___VSuvj:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___sBjPX:active {
+.UseStyledSystem-module__hop-br-active___JMM30:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___ldKxI:active {
+.UseStyledSystem-module__hop-bt-active___r6-6b:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___Gzm9t:hover {
+.UseStyledSystem-module__hop-bg-hover___LcLu5: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___viVUG: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___e--6L:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___Zoiej:hover {
+.UseStyledSystem-module__hop-bs-hover___1YDvX: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___uu9Ac: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___v8uK1:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___Q88Tg:hover {
+.UseStyledSystem-module__hop-c-hover___8yXVl:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___Vyuyv:focus-visible {
+.UseStyledSystem-module__hop-c-focus___YNdjT:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___UquV3:active {
+.UseStyledSystem-module__hop-c-active___crOAD:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___GqEOP:hover {
+.UseStyledSystem-module__hop-cs-hover___MCgaD:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___7EKmX:hover {
+.UseStyledSystem-module__hop-f-hover___dxKWH: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___y-fcL:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___bSfTb:hover {
+.UseStyledSystem-module__hop-o-hover___IWVF-: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___IaFLw:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___qojJF:active {
+.UseStyledSystem-module__hop-o-active___caQJi: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___ybCdL: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___0OW8N),
+:where(.htmlElement-module__hop-HtmlElement___0OW8N::after),
+:where(.htmlElement-module__hop-HtmlElement___0OW8N::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-XEJOSGGW.js';
+import './chunk-BA7JHGU6.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-AZ44JR7G.js';
+import './chunk-GZ3MQOPA.js';
+import './chunk-GXUFWEP5.js';
+import './chunk-VJNKYHHT.js';
+import './chunk-EF3UX45A.js';
+import './chunk-YJKWZYVH.js';
+import './chunk-DVOV55CD.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-REAV6RA4.js';
+import './chunk-SSBFBJJN.js';
+import './chunk-5GX5VZFT.js';
+import './chunk-Y7GWSHYF.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';

package/dist/{chunk-DRFY5W7M.js → chunk-5GX5VZFT.js}

@@ -1,4 +1,4 @@
-import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-KKVEOD5L.js';
+import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-Y7GWSHYF.js';
 import { parseResponsiveValue } from './chunk-SFOVKOPG.js';
 import { isNil, isObject } from './chunk-U5R6ZXH3.js';
 

package/dist/{chunk-KLNF34G6.js → chunk-5U5IRAPA.js}

@@ -1,4 +1,4 @@
-import { useMediaQuery } from './chunk-M4X2T3D3.js';
+import { useMediaQuery } from './chunk-T6JS7L6B.js';
 
 // src/color-scheme/useColorScheme.ts
 function useColorScheme(colorScheme, defaultColorScheme) {

package/dist/{chunk-EJR6CH3T.js → chunk-AZ44JR7G.js}

@@ -1,4 +1,4 @@
-import { htmlElement } from './chunk-LCW3QCQQ.js';
+import { htmlElement } from './chunk-GZ3MQOPA.js';
 
 // src/html-wrappers/html.ts
 var Address = htmlElement("address");

package/dist/{chunk-J2UW6IZ5.js → chunk-BA7JHGU6.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-GFXIV6J4.js';
+import { StyledSystemRootCssClass } from './chunk-REAV6RA4.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
 import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
 import { useRef, useState } from 'react';