@hopper-ui/styled-system 3.1.7 → 3.1.9

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

@@ -2,7 +2,7 @@
  * This file is generated by Style Dictionary. Do not edit directly.
  */
 
-.hop-5-1-7-workleap {
+.hop-5-1-9-workleap {
   --hop-comp-switch-thumb-filter-selected: none;
   --hop-comp-switch-thumb-filter: none;
   --hop-comp-switch-track-box-shadow: none;
@@ -310,7 +310,6 @@
   --hop-space-20: 0.125rem;
   --hop-space-10: 0.0625rem;
   --hop-space-0: 0;
-  --hop-border-radius-2-5: 0.75rem;
   --hop-border-radius-9999: 624.9375rem;
   --hop-border-radius-4: 1.5rem;
   --hop-border-radius-3: 1rem;
@@ -353,12 +352,59 @@
   --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
   --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
   --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
-  --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
   --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
   --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
   --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
   --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
   --hop-shadow-none: none;
+  --hop-cobalt-900: #001a4d;
+  --hop-cobalt-800: #002766;
+  --hop-cobalt-700: #003b99;
+  --hop-cobalt-600: #004fcc;
+  --hop-cobalt-500: #0165fc;
+  --hop-cobalt-400: #3a82ff;
+  --hop-cobalt-300: #6aa3ff;
+  --hop-cobalt-200: #99c2ff;
+  --hop-cobalt-100: #c2daff;
+  --hop-cobalt-75: #d6e7ff;
+  --hop-cobalt-50: #e6f0ff;
+  --hop-cobalt-25: #f2f7ff;
+  --hop-mint-900: #063527;
+  --hop-mint-800: #084a34;
+  --hop-mint-700: #0a6042;
+  --hop-mint-600: #0b6f4c;
+  --hop-mint-500: #0d8058;
+  --hop-mint-400: #10a96f;
+  --hop-mint-300: #12cb80;
+  --hop-mint-200: #0be57d;
+  --hop-mint-100: #66ecae;
+  --hop-mint-75: #97f2c8;
+  --hop-mint-50: #d7faea;
+  --hop-mint-25: #eafdf3;
+  --hop-amber-900: #3d3200;
+  --hop-amber-800: #574500;
+  --hop-amber-700: #705900;
+  --hop-amber-600: #8a6c00;
+  --hop-amber-500: #a68000;
+  --hop-amber-400: #cfa000;
+  --hop-amber-300: #ffb700;
+  --hop-amber-200: #ffc94a;
+  --hop-amber-100: #ffd873;
+  --hop-amber-75: #ffe39a;
+  --hop-amber-50: #fff1cc;
+  --hop-amber-25: #fff6e0;
+  --hop-rose-900: #2b1e23;
+  --hop-rose-800: #3d2630;
+  --hop-rose-700: #542f3e;
+  --hop-rose-600: #6a394c;
+  --hop-rose-500: #80435a;
+  --hop-rose-400: #995068;
+  --hop-rose-300: #fc5992;
+  --hop-rose-200: #f47c9e;
+  --hop-rose-100: #f7a3ba;
+  --hop-rose-75: #f9c1cf;
+  --hop-rose-50: #fbd6df;
+  --hop-rose-25: #fdecef;
   --hop-samoyed: #ffffff;
   --hop-rock-900: #232426;
   --hop-rock-800: #313335;
@@ -958,6 +1004,38 @@
   --hop-status-caution-border-hover: var(--hop-koi-400);
   --hop-status-caution-border-disabled: var(--hop-koi-50);
   --hop-status-caution-border: var(--hop-koi-300);
+  --hop-secondary-icon-strong-hover: var(--hop-samoyed);
+  --hop-secondary-icon-strong: var(--hop-samoyed);
+  --hop-secondary-icon-disabled: var(--hop-koi-200);
+  --hop-secondary-icon-selected: var(--hop-koi-500);
+  --hop-secondary-icon-press: var(--hop-koi-700);
+  --hop-secondary-icon-hover: var(--hop-koi-600);
+  --hop-secondary-icon: var(--hop-koi-500);
+  --hop-secondary-border-focus: var(--hop-koi-300);
+  --hop-secondary-border-selected: var(--hop-koi-500);
+  --hop-secondary-border-press: var(--hop-koi-400);
+  --hop-secondary-border: var(--hop-koi-300);
+  --hop-secondary-surface-strong-selected: var(--hop-koi-50);
+  --hop-secondary-surface-strong-press: var(--hop-koi-600);
+  --hop-secondary-surface-strong-hover: var(--hop-koi-500);
+  --hop-secondary-surface-strong: var(--hop-koi-300);
+  --hop-secondary-surface-weak-selected: var(--hop-koi-100);
+  --hop-secondary-surface-weak-press: var(--hop-koi-75);
+  --hop-secondary-surface-weak-hover: var(--hop-koi-50);
+  --hop-secondary-surface-weak: var(--hop-koi-25);
+  --hop-secondary-surface-disabled: var(--hop-koi-200);
+  --hop-secondary-surface-focus: var(--hop-koi-25);
+  --hop-secondary-surface-selected: var(--hop-koi-50);
+  --hop-secondary-surface-press: var(--hop-koi-300);
+  --hop-secondary-surface-hover: var(--hop-koi-200);
+  --hop-secondary-surface: var(--hop-koi-50);
+  --hop-secondary-text-strong-hover: var(--hop-samoyed);
+  --hop-secondary-text-strong: var(--hop-samoyed);
+  --hop-secondary-text-disabled: var(--hop-koi-200);
+  --hop-secondary-text-selected: var(--hop-koi-500);
+  --hop-secondary-text-press: var(--hop-koi-700);
+  --hop-secondary-text-hover: var(--hop-koi-600);
+  --hop-secondary-text: var(--hop-koi-500);
   --hop-information-text-weak: var(--hop-coastal-300);
   --hop-information-text: var(--hop-coastal-800);
   --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1130,6 +1208,9 @@
   --hop-primary-surface-active: var(--hop-sapphire-300);
   --hop-primary-icon-active: var(--hop-sapphire-700);
   --hop-primary-border-active: var(--hop-sapphire-300);
+  --hop-neutral-text-always-dark: var(--hop-rock-900);
+  --hop-neutral-text-always-light: var(--hop-samoyed);
+  --hop-neutral-text-inverse: var(--hop-rock-900);
   --hop-neutral-text-weakest: var(--hop-rock-300);
   --hop-neutral-text-weak-selected: var(--hop-rock-600);
   --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1141,6 +1222,9 @@
   --hop-neutral-text-disabled: var(--hop-rock-300);
   --hop-neutral-text-selected: var(--hop-samoyed);
   --hop-neutral-text: var(--hop-rock-800);
+  --hop-neutral-surface-always-dark: var(--hop-rock-900);
+  --hop-neutral-surface-always-light: var(--hop-samoyed);
+  --hop-neutral-surface-inverse: var(--hop-rock-900);
   --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
   --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
   --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1154,6 +1238,9 @@
   --hop-neutral-surface-disabled: var(--hop-rock-50);
   --hop-neutral-surface-selected: var(--hop-rock-800);
   --hop-neutral-surface: var(--hop-samoyed);
+  --hop-neutral-icon-always-dark: var(--hop-rock-900);
+  --hop-neutral-icon-always-light: var(--hop-samoyed);
+  --hop-neutral-icon-inverse: var(--hop-rock-900);
   --hop-neutral-icon-weakest: var(--hop-rock-200);
   --hop-neutral-icon-weak-selected: var(--hop-rock-600);
   --hop-neutral-icon-weak-press: var(--hop-rock-700);
@@ -1335,9 +1422,10 @@
   --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
   --hop-comp-card-second-level-border-color: var(--hop-neutral-surface-weakest);
   --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
+  --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-md);
   --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
   --hop-comp-card-main-background-color: var(--hop-neutral-surface);
-  --hop-comp-card-border-radius: var(--hop-shape-rounded-md);
+  --hop-comp-card-main-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);

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

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

package/dist/tokens/generated/styledSystemConstants.js

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

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

@@ -173,6 +173,54 @@ declare const HopperColors: {
     readonly "core_rock-800": "rock-800";
     readonly "core_rock-900": "rock-900";
     readonly core_samoyed: "samoyed";
+    readonly "core_rose-25": "rose-25";
+    readonly "core_rose-50": "rose-50";
+    readonly "core_rose-75": "rose-75";
+    readonly "core_rose-100": "rose-100";
+    readonly "core_rose-200": "rose-200";
+    readonly "core_rose-300": "rose-300";
+    readonly "core_rose-400": "rose-400";
+    readonly "core_rose-500": "rose-500";
+    readonly "core_rose-600": "rose-600";
+    readonly "core_rose-700": "rose-700";
+    readonly "core_rose-800": "rose-800";
+    readonly "core_rose-900": "rose-900";
+    readonly "core_amber-25": "amber-25";
+    readonly "core_amber-50": "amber-50";
+    readonly "core_amber-75": "amber-75";
+    readonly "core_amber-100": "amber-100";
+    readonly "core_amber-200": "amber-200";
+    readonly "core_amber-300": "amber-300";
+    readonly "core_amber-400": "amber-400";
+    readonly "core_amber-500": "amber-500";
+    readonly "core_amber-600": "amber-600";
+    readonly "core_amber-700": "amber-700";
+    readonly "core_amber-800": "amber-800";
+    readonly "core_amber-900": "amber-900";
+    readonly "core_mint-25": "mint-25";
+    readonly "core_mint-50": "mint-50";
+    readonly "core_mint-75": "mint-75";
+    readonly "core_mint-100": "mint-100";
+    readonly "core_mint-200": "mint-200";
+    readonly "core_mint-300": "mint-300";
+    readonly "core_mint-400": "mint-400";
+    readonly "core_mint-500": "mint-500";
+    readonly "core_mint-600": "mint-600";
+    readonly "core_mint-700": "mint-700";
+    readonly "core_mint-800": "mint-800";
+    readonly "core_mint-900": "mint-900";
+    readonly "core_cobalt-25": "cobalt-25";
+    readonly "core_cobalt-50": "cobalt-50";
+    readonly "core_cobalt-75": "cobalt-75";
+    readonly "core_cobalt-100": "cobalt-100";
+    readonly "core_cobalt-200": "cobalt-200";
+    readonly "core_cobalt-300": "cobalt-300";
+    readonly "core_cobalt-400": "cobalt-400";
+    readonly "core_cobalt-500": "cobalt-500";
+    readonly "core_cobalt-600": "cobalt-600";
+    readonly "core_cobalt-700": "cobalt-700";
+    readonly "core_cobalt-800": "cobalt-800";
+    readonly "core_cobalt-900": "cobalt-900";
 };
 declare const BackgroundColors: {
     readonly "danger-active": "danger-surface-active";
@@ -202,6 +250,9 @@ declare const BackgroundColors: {
     readonly "neutral-weakest": "neutral-surface-weakest";
     readonly "neutral-weakest-selected": "neutral-surface-weakest-selected";
     readonly "neutral-weakest-hover": "neutral-surface-weakest-hover";
+    readonly "neutral-inverse": "neutral-surface-inverse";
+    readonly "neutral-always-light": "neutral-surface-always-light";
+    readonly "neutral-always-dark": "neutral-surface-always-dark";
     readonly "primary-active": "primary-surface-active";
     readonly "primary-strong-active": "primary-surface-strong-active";
     readonly "primary-weak-active": "primary-surface-weak-active";
@@ -286,6 +337,20 @@ declare const BackgroundColors: {
     readonly information: "information-surface";
     readonly "information-strong": "information-surface-strong";
     readonly "information-weak": "information-surface-weak";
+    readonly secondary: "secondary-surface";
+    readonly "secondary-hover": "secondary-surface-hover";
+    readonly "secondary-press": "secondary-surface-press";
+    readonly "secondary-selected": "secondary-surface-selected";
+    readonly "secondary-focus": "secondary-surface-focus";
+    readonly "secondary-disabled": "secondary-surface-disabled";
+    readonly "secondary-weak": "secondary-surface-weak";
+    readonly "secondary-weak-hover": "secondary-surface-weak-hover";
+    readonly "secondary-weak-press": "secondary-surface-weak-press";
+    readonly "secondary-weak-selected": "secondary-surface-weak-selected";
+    readonly "secondary-strong": "secondary-surface-strong";
+    readonly "secondary-strong-hover": "secondary-surface-strong-hover";
+    readonly "secondary-strong-press": "secondary-surface-strong-press";
+    readonly "secondary-strong-selected": "secondary-surface-strong-selected";
     readonly "status-caution": "status-caution-surface";
     readonly "status-caution-disabled": "status-caution-surface-disabled";
     readonly "status-caution-hover": "status-caution-surface-hover";
@@ -391,6 +456,9 @@ declare const TextColors: {
     readonly "neutral-weak-press": "neutral-text-weak-press";
     readonly "neutral-weak-selected": "neutral-text-weak-selected";
     readonly "neutral-weakest": "neutral-text-weakest";
+    readonly "neutral-inverse": "neutral-text-inverse";
+    readonly "neutral-always-light": "neutral-text-always-light";
+    readonly "neutral-always-dark": "neutral-text-always-dark";
     readonly "primary-active": "primary-text-active";
     readonly primary: "primary-text";
     readonly "primary-selected": "primary-text-selected";
@@ -429,6 +497,13 @@ declare const TextColors: {
     readonly "decorative-option1-weak": "decorative-option1-text-weak";
     readonly information: "information-text";
     readonly "information-weak": "information-text-weak";
+    readonly secondary: "secondary-text";
+    readonly "secondary-hover": "secondary-text-hover";
+    readonly "secondary-press": "secondary-text-press";
+    readonly "secondary-selected": "secondary-text-selected";
+    readonly "secondary-disabled": "secondary-text-disabled";
+    readonly "secondary-strong": "secondary-text-strong";
+    readonly "secondary-strong-hover": "secondary-text-strong-hover";
     readonly "status-caution": "status-caution-text";
     readonly "status-caution-disabled": "status-caution-text-disabled";
     readonly "status-caution-hover": "status-caution-text-hover";
@@ -523,6 +598,9 @@ declare const IconColors: {
     readonly "neutral-weak-press": "neutral-icon-weak-press";
     readonly "neutral-weak-selected": "neutral-icon-weak-selected";
     readonly "neutral-weakest": "neutral-icon-weakest";
+    readonly "neutral-inverse": "neutral-icon-inverse";
+    readonly "neutral-always-light": "neutral-icon-always-light";
+    readonly "neutral-always-dark": "neutral-icon-always-dark";
     readonly "primary-active": "primary-icon-active";
     readonly primary: "primary-icon";
     readonly "primary-selected": "primary-icon-selected";
@@ -553,6 +631,13 @@ declare const IconColors: {
     readonly information: "information-icon";
     readonly "information-weakest": "information-icon-weakest";
     readonly "information-weak": "information-icon-weak";
+    readonly secondary: "secondary-icon";
+    readonly "secondary-hover": "secondary-icon-hover";
+    readonly "secondary-press": "secondary-icon-press";
+    readonly "secondary-selected": "secondary-icon-selected";
+    readonly "secondary-disabled": "secondary-icon-disabled";
+    readonly "secondary-strong": "secondary-icon-strong";
+    readonly "secondary-strong-hover": "secondary-icon-strong-hover";
     readonly "status-caution": "status-caution-icon";
     readonly "status-caution-disabled": "status-caution-icon-disabled";
     readonly "status-caution-hover": "status-caution-icon-hover";
@@ -656,6 +741,10 @@ declare const BorderColors: {
     readonly "decorative-option2": "decorative-option2-border";
     readonly "decorative-option1": "decorative-option1-border";
     readonly information: "information-border";
+    readonly secondary: "secondary-border";
+    readonly "secondary-press": "secondary-border-press";
+    readonly "secondary-selected": "secondary-border-selected";
+    readonly "secondary-focus": "secondary-border-focus";
     readonly "status-caution": "status-caution-border";
     readonly "status-caution-disabled": "status-caution-border-disabled";
     readonly "status-caution-hover": "status-caution-border-hover";
@@ -993,7 +1082,6 @@ declare const Elevation: {
     readonly core_md: "shadow-md";
     readonly core_lg: "shadow-lg";
     readonly "core_tactility-button": "shadow-tactility-button";
-    readonly "core_tactility-card": "shadow-tactility-card";
     readonly "core_tactility-control": "shadow-tactility-control";
     readonly none: "elevation-none";
     readonly raised: "elevation-raised";
@@ -1194,7 +1282,6 @@ declare const Shape: {
     readonly core_3: "border-radius-3";
     readonly core_4: "border-radius-4";
     readonly core_9999: "border-radius-9999";
-    readonly "core_2-5": "border-radius-2-5";
     readonly circle: "shape-circle";
     readonly pill: "shape-pill";
     readonly "rounded-lg": "shape-rounded-lg";

package/dist/tokens/generated/styledSystemToTokenMappings.js

@@ -1,2 +1,2 @@
-export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontOffset, FontSize, FontWeight, GradientColors, HopperColors, IconColors, LineHeight, Motions, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-ZHO2NVMU.js';
+export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontOffset, FontSize, FontWeight, GradientColors, HopperColors, IconColors, LineHeight, Motions, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-QKSGYCZX.js';
 import '../../chunk-AQ5VUG5P.js';