@hopper-ui/tokens 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hopper-ui/tokens
 
+## 2.1.0
+
+### Minor Changes
+
+- 1ede3f2: Added data viz tokens and added sections to the color page in the docs.
+
 ## 2.0.0
 
 ### Major Changes

package/dist/dark/tokens.css

@@ -4,7 +4,7 @@
   --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
   --hop-upsell-icon-weak: var(--hop-sunken-treasure-300);
   --hop-upsell-border: var(--hop-sunken-treasure-200);
-  --hop-upsell-surface-hover: var(--hop-sunken-treasure-600);
+  --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
   --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
   --hop-upsell-icon-active: var(--hop-sunken-treasure-300);
   --hop-upsell-surface-weak: var(--hop-sunken-treasure-800);
@@ -78,7 +78,7 @@
   --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
   --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
   --hop-decorative-option8-text-weak: var(--hop-amanita-300);
-  --hop-decorative-option8-surface: var(--hop-amanita-100);
+  --hop-decorative-option8-surface: var(--hop-amanita-75);
   --hop-decorative-option8-text: var(--hop-amanita-900);
   --hop-decorative-option7-border: var(--hop-toad-400);
   --hop-decorative-option7-icon: var(--hop-toad-900);
@@ -250,4 +250,9 @@
   --hop-status-positive-surface-strong: var(--hop-moss-200);
   --hop-status-positive-surface: var(--hop-moss-75);
   --hop-status-positive-text: var(--hop-moss-900);
+  --hop-unavailable: var(--hop-rock-600);
+  --hop-unavailable-weak: var(--hop-rock-400);
+  --hop-unavailable-strong: var(--hop-rock-700);
+  --hop-text-onlight: var(--hop-rock-800);
+  --hop-text-ondark: var(--hop-samoyed);
 }

package/dist/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 20:26:36 GMT
+ * Generated on Wed, 01 Nov 2023 13:24:41 GMT
  */
 
 :root {
@@ -189,6 +189,266 @@
   --hop-space-40: 0.25rem;
   --hop-space-20: 0.125rem;
   --hop-space-0: 0;
+  --hop-categorical-6colorgroup-option4-category6: #fbe997;
+  --hop-categorical-6colorgroup-option4-category5: #bfdca9;
+  --hop-categorical-6colorgroup-option4-category4: #c7ebff;
+  --hop-categorical-6colorgroup-option4-category3: #ffbf92;
+  --hop-categorical-6colorgroup-option4-category2: #a0b8fa;
+  --hop-categorical-6colorgroup-option4-category1: #fbbdcf;
+  --hop-categorical-6colorgroup-option3-category6: #fbbdcf;
+  --hop-categorical-6colorgroup-option3-category5: #2e70a8;
+  --hop-categorical-6colorgroup-option3-category4: #a7e6dc;
+  --hop-categorical-6colorgroup-option3-category3: #e8ddd0;
+  --hop-categorical-6colorgroup-option3-category2: #aecdd5;
+  --hop-categorical-6colorgroup-option3-category1: #b6bead;
+  --hop-categorical-6colorgroup-option2-category6: #d2cdf8;
+  --hop-categorical-6colorgroup-option2-category5: #a7e6dc;
+  --hop-categorical-6colorgroup-option2-category4: #ff9b3f;
+  --hop-categorical-6colorgroup-option2-category3: #69bfa0;
+  --hop-categorical-6colorgroup-option2-category2: #fbe997;
+  --hop-categorical-6colorgroup-option2-category1: #2e70a8;
+  --hop-categorical-6colorgroup-option1-category6: #69bfa0;
+  --hop-categorical-6colorgroup-option1-category5: #ecd599;
+  --hop-categorical-6colorgroup-option1-category4: #fa4d59;
+  --hop-categorical-6colorgroup-option1-category3: #bfdca9;
+  --hop-categorical-6colorgroup-option1-category2: #a0b8fa;
+  --hop-categorical-6colorgroup-option1-category1: #b6bead;
+  --hop-categorical-5colorgroup-option4-category5: #b6bead;
+  --hop-categorical-5colorgroup-option4-category4: #d2cdf8;
+  --hop-categorical-5colorgroup-option4-category3: #fa4d59;
+  --hop-categorical-5colorgroup-option4-category2: #c7ebff;
+  --hop-categorical-5colorgroup-option4-category1: #69bfa0;
+  --hop-categorical-5colorgroup-option3-category5: #ffbf92;
+  --hop-categorical-5colorgroup-option3-category4: #b6bead;
+  --hop-categorical-5colorgroup-option3-category3: #aecdd5;
+  --hop-categorical-5colorgroup-option3-category2: #ecd599;
+  --hop-categorical-5colorgroup-option3-category1: #d2cdf8;
+  --hop-categorical-5colorgroup-option2-category5: #c5bef6;
+  --hop-categorical-5colorgroup-option2-category4: #fbe997;
+  --hop-categorical-5colorgroup-option2-category3: #2e70a8;
+  --hop-categorical-5colorgroup-option2-category2: #b6bead;
+  --hop-categorical-5colorgroup-option2-category1: #ff9b3f;
+  --hop-categorical-5colorgroup-option1-category5: #69bfa0;
+  --hop-categorical-5colorgroup-option1-category4: #ecd599;
+  --hop-categorical-5colorgroup-option1-category3: #bfdca9;
+  --hop-categorical-5colorgroup-option1-category2: #ff9b3f;
+  --hop-categorical-5colorgroup-option1-category1: #b6bead;
+  --hop-categorical-4colorgroup-option4-category4: #d2cdf8;
+  --hop-categorical-4colorgroup-option4-category3: #fa4d59;
+  --hop-categorical-4colorgroup-option4-category2: #c7ebff;
+  --hop-categorical-4colorgroup-option4-category1: #69bfa0;
+  --hop-categorical-4colorgroup-option3-category4: #ecd599;
+  --hop-categorical-4colorgroup-option3-category3: #2e70a8;
+  --hop-categorical-4colorgroup-option3-category2: #b6bead;
+  --hop-categorical-4colorgroup-option3-category1: #ffbf92;
+  --hop-categorical-4colorgroup-option2-category4: #fbe997;
+  --hop-categorical-4colorgroup-option2-category3: #84d0b4;
+  --hop-categorical-4colorgroup-option2-category2: #c7ebff;
+  --hop-categorical-4colorgroup-option2-category1: #b6bead;
+  --hop-categorical-4colorgroup-option1-category4: #fbbdcf;
+  --hop-categorical-4colorgroup-option1-category3: #cde8ac;
+  --hop-categorical-4colorgroup-option1-category2: #d2cdf8;
+  --hop-categorical-4colorgroup-option1-category1: #b6bead;
+  --hop-categorical-3colorgroup-option4-category3: #fbbdcf;
+  --hop-categorical-3colorgroup-option4-category2: #a0b8fa;
+  --hop-categorical-3colorgroup-option4-category1: #b6bead;
+  --hop-categorical-3colorgroup-option3-category3: #aecdd5;
+  --hop-categorical-3colorgroup-option3-category2: #fbe997;
+  --hop-categorical-3colorgroup-option3-category1: #69bfa0;
+  --hop-categorical-3colorgroup-option2-category3: #69bfa0;
+  --hop-categorical-3colorgroup-option2-category2: #a7e6dc;
+  --hop-categorical-3colorgroup-option2-category1: #ecd599;
+  --hop-categorical-3colorgroup-option1-category3: #bfdca9;
+  --hop-categorical-3colorgroup-option1-category2: #d2cdf8;
+  --hop-categorical-3colorgroup-option1-category1: #b6bead;
+  --hop-categorical-2colorgroup-option1-category1: #b6bead;
+  --hop-categorical-2colorgroup-option1-category2: #c7ebff;
+  --hop-categorical-2colorgroup-option2-category1: #fbbdcf;
+  --hop-categorical-2colorgroup-option2-category2: #fbe997;
+  --hop-categorical-2colorgroup-option3-category1: #2f48ff;
+  --hop-categorical-2colorgroup-option3-category2: #ff9b3f;
+  --hop-categorical-2colorgroup-option4-category1: #bfdca9;
+  --hop-categorical-2colorgroup-option4-category2: #6c8ffd;
+  --hop-categorical-2colorgroup-option5-category1: #a7e6dc;
+  --hop-categorical-2colorgroup-option5-category2: #a0b8fa;
+  --hop-categorical-2colorgroup-option6-category1: #ffbf92;
+  --hop-categorical-2colorgroup-option6-category2: #69bfa0;
+  --hop-categorical-sequence-category13-hover: #54b692;
+  --hop-categorical-sequence-category13: #69bfa0;
+  --hop-categorical-sequence-cateogry12-hover: #779af8;
+  --hop-categorical-sequence-category12: #a0b8fa;
+  --hop-categorical-sequence-category-11-hover: #ffac70;
+  --hop-categorical-sequence-category11: #ffbf92;
+  --hop-categorical-sequence-category10-hover: #93bdc8;
+  --hop-categorical-sequence-category10: #aecdd5;
+  --hop-categorical-sequence-category9-hover: #90e0d2;
+  --hop-categorical-sequence-category9: #a7e6dc;
+  --hop-categorical-sequence-category8-hover: #ddcebb;
+  --hop-categorical-sequence-category8: #e8ddd0;
+  --hop-categorical-sequence-category7-hover: #fae275;
+  --hop-categorical-sequence-category7: #fbe997;
+  --hop-categorical-sequence-category6-hover: #a9d08b;
+  --hop-categorical-sequence-category6: #bfdca9;
+  --hop-categorical-sequence-category5-hover: #f99fb8;
+  --hop-categorical-sequence-category5: #fbbdcf;
+  --hop-categorical-sequence-category4-hover: #a4ae98;
+  --hop-categorical-sequence-category4: #b6bead;
+  --hop-categorical-sequence-category3-hover: #bfb8f5;
+  --hop-categorical-sequence-category3: #d2cdf8;
+  --hop-categorical-sequence-category2-hover: #e6c675;
+  --hop-categorical-sequence-category2: #ecd599;
+  --hop-categorical-sequence-category1-hover: #ade2ff;
+  --hop-categorical-sequence-category1: #c7ebff;
+  --hop-diverging-sequence-2-negative10-hover: #431a17;
+  --hop-diverging-sequence-2-negative10: #6c2320;
+  --hop-diverging-sequence-2-negative9-hover: #6c2320;
+  --hop-diverging-sequence-2-negative9: #952927;
+  --hop-diverging-sequence-2-negative8-hover: #952927;
+  --hop-diverging-sequence-2-negative8: #ba2d2d;
+  --hop-diverging-sequence-2-negative7-hover: #ba2d2d;
+  --hop-diverging-sequence-2-negative7: #cb2e31;
+  --hop-diverging-sequence-2-negative6-hover: #cb2e31;
+  --hop-diverging-sequence-2-negative6: #df3236;
+  --hop-diverging-sequence-2-negative5-hover: #df3236;
+  --hop-diverging-sequence-2-negative5: #f56263;
+  --hop-diverging-sequence-2-negative4-hover: #f56263;
+  --hop-diverging-sequence-2-negative4: #ff8e8e;
+  --hop-diverging-sequence-2-negative3-hover: #ff8e8e;
+  --hop-diverging-sequence-2-negative3: #ffbcb7;
+  --hop-diverging-sequence-2-negative2-hover: #ffbcb7;
+  --hop-diverging-sequence-2-negative2: #ffd6d3;
+  --hop-diverging-sequence-2-negative1-hover: #ffd6d3;
+  --hop-diverging-sequence-2-negative1: #fde6e5;
+  --hop-diverging-sequence-2-positive1-hover: #cde8ac;
+  --hop-diverging-sequence-2-positive1: #e3f3b9;
+  --hop-diverging-sequence-2-positive2-hover: #aad89d;
+  --hop-diverging-sequence-2-positive2: #cde8ac;
+  --hop-diverging-sequence-2-positive3-hover: #7dc291;
+  --hop-diverging-sequence-2-positive3: #aad89d;
+  --hop-diverging-sequence-2-positive4-hover: #47a584;
+  --hop-diverging-sequence-2-positive4: #7dc291;
+  --hop-diverging-sequence-2-positive5-hover: #188a71;
+  --hop-diverging-sequence-2-positive5: #47a584;
+  --hop-diverging-sequence-2-positive6-hover: #0c796b;
+  --hop-diverging-sequence-2-positive6: #188a71;
+  --hop-diverging-sequence-2-positive7-hover: #0a6f64;
+  --hop-diverging-sequence-2-positive7: #0c796b;
+  --hop-diverging-sequence-2-positive8-hover: #115a52;
+  --hop-diverging-sequence-2-positive8: #0a6f64;
+  --hop-diverging-sequence-2-positive9-hover: #16433d;
+  --hop-diverging-sequence-2-positive9: #115a52;
+  --hop-diverging-sequence-2-positive10-hover: #132a27;
+  --hop-diverging-sequence-2-positive10: #16433d;
+  --hop-diverging-sequence-1-negative9-hover: #431a17;
+  --hop-diverging-sequence-1-negative9: #6c2320;
+  --hop-diverging-sequence-1-negative8-hover: #6c2320;
+  --hop-diverging-sequence-1-negative8: #952927;
+  --hop-diverging-sequence-1-negative7-hover: #952927;
+  --hop-diverging-sequence-1-negative7: #ba2d2d;
+  --hop-diverging-sequence-1-negative6-hover: #ba2d2d;
+  --hop-diverging-sequence-1-negative6: #cb2e31;
+  --hop-diverging-sequence-1-negative5-hover: #cb2e31;
+  --hop-diverging-sequence-1-negative5: #df3236;
+  --hop-diverging-sequence-1-negative4-hover: #df3236;
+  --hop-diverging-sequence-1-negative4: #f56263;
+  --hop-diverging-sequence-1-negative3-hover: #f56263;
+  --hop-diverging-sequence-1-negative3: #ff8e8e;
+  --hop-diverging-sequence-1-negative2-hover: #ff8e8e;
+  --hop-diverging-sequence-1-negative2: #ffbcb7;
+  --hop-diverging-sequence-1-negative1-hover: #ffbcb7;
+  --hop-diverging-sequence-1-negative1: #ffd8be;
+  --hop-diverging-sequence-1-neutral-hover: #eac96d;
+  --hop-diverging-sequence-1-neutral: #f7e694;
+  --hop-diverging-sequence-1-positive1-hover: #aad89d;
+  --hop-diverging-sequence-1-positive1: #cde8ac;
+  --hop-diverging-sequence-1-positive2-hover: #7dc291;
+  --hop-diverging-sequence-1-positive2: #aad89d;
+  --hop-diverging-sequence-1-positive3-hover: #47a584;
+  --hop-diverging-sequence-1-positive3: #7dc291;
+  --hop-diverging-sequence-1-positive-4-hover: #188a71;
+  --hop-diverging-sequence-1-positive4: #47a584;
+  --hop-diverging-sequence-1-positive5-hover: #0c796b;
+  --hop-diverging-sequence-1-positive5: #188a71;
+  --hop-diverging-sequence-1-positive6-hover: #0a6f64;
+  --hop-diverging-sequence-1-positive6: #0c796b;
+  --hop-diverging-sequence-1-positive7-hover: #115a52;
+  --hop-diverging-sequence-1-positive7: #0a6f64;
+  --hop-diverging-sequence-1-positive8-hover: #16433d;
+  --hop-diverging-sequence-1-positive8: #115a52;
+  --hop-diverging-sequence-1-positive9-hover: #132a27;
+  --hop-diverging-sequence-1-positive9: #16433d;
+  --hop-monochromatic-negative-900-hover: #2d100d;
+  --hop-monochromatic-negative-800-hover: #431a17;
+  --hop-monochromatic-negative-700-hover: #6c2320;
+  --hop-monochromatic-negative-600-hover: #952927;
+  --hop-monochromatic-negative-500-hover: #ba2d2d;
+  --hop-monochromatic-negative-400-hover: #cb2e31;
+  --hop-monochromatic-negative-300-hover: #df3236;
+  --hop-monochromatic-negative-200-hover: #f56263;
+  --hop-monochromatic-negative-100-hover: #ff8e8e;
+  --hop-monochromatic-negative-75-hover: #ffbcb7;
+  --hop-monochromatic-negative-50-hover: #ffd6d3;
+  --hop-monochromatic-negative-25-hover: #fde6e5;
+  --hop-monochromatic-negative-900: #431a17;
+  --hop-monochromatic-negative-800: #6c2320;
+  --hop-monochromatic-negative-700: #952927;
+  --hop-monochromatic-negative-600: #ba2d2d;
+  --hop-monochromatic-negative-500: #cb2e31;
+  --hop-monochromatic-negative-400: #df3236;
+  --hop-monochromatic-negative-300: #f56263;
+  --hop-monochromatic-negative-200: #ff8e8e;
+  --hop-monochromatic-negative-100: #ffbcb7;
+  --hop-monochromatic-negative-75: #ffd6d3;
+  --hop-monochromatic-negative-50: #fde6e5;
+  --hop-monochromatic-negative-25: #fdf6f6;
+  --hop-monochromatic-positive-900-hover: #0a1716;
+  --hop-monochromatic-positive-800-hover: #132a27;
+  --hop-monochromatic-positive-700-hover: #16433d;
+  --hop-monochromatic-positive-600-hover: #115a52;
+  --hop-monochromatic-positive-500-hover: #0a6f64;
+  --hop-monochromatic-positive-400-hover: #0c796b;
+  --hop-monochromatic-positive-300-hover: #188a71;
+  --hop-monochromatic-positive-200-hover: #47a584;
+  --hop-monochromatic-positive-100-hover: #7dc291;
+  --hop-monochromatic-positive-75-hover: #aad89d;
+  --hop-monochromatic-positive-50-hover: #cde8ac;
+  --hop-monochromatic-positive-25-hover: #e3f3b9;
+  --hop-monochromatic-positive-900: #132a27;
+  --hop-monochromatic-positive-800: #16433d;
+  --hop-monochromatic-positive-700: #115a52;
+  --hop-monochromatic-positive-600: #0a6f64;
+  --hop-monochromatic-positive-500: #0c796b;
+  --hop-monochromatic-positive-400: #188a71;
+  --hop-monochromatic-positive-300: #47a584;
+  --hop-monochromatic-positive-200: #7dc291;
+  --hop-monochromatic-positive-100: #aad89d;
+  --hop-monochromatic-positive-75: #cde8ac;
+  --hop-monochromatic-positive-50: #e3f3b9;
+  --hop-monochromatic-positive-25: #f4f9e9;
+  --hop-monochromatic-primary-900-hover: #0b173a;
+  --hop-monochromatic-primary-800-hover: #152450;
+  --hop-monochromatic-primary-700-hover: #1b3587;
+  --hop-monochromatic-primary-600-hover: #2040c7;
+  --hop-monochromatic-primary-500-hover: #2a43e8;
+  --hop-monochromatic-primary-400-hover: #3b57ff;
+  --hop-monochromatic-primary-300-hover: #4767fe;
+  --hop-monochromatic-primary-200-hover: #6c8ffd;
+  --hop-monochromatic-primary-100-hover: #95b1ff;
+  --hop-monochromatic-primary-75-hover: #b9cbff;
+  --hop-monochromatic-primary-50-hover: #d6e0ff;
+  --hop-monochromatic-primary-25-hover: #e6ebff;
+  --hop-monochromatic-primary-900: #152450;
+  --hop-monochromatic-primary-800: #1b3587;
+  --hop-monochromatic-primary-700: #2040c7;
+  --hop-monochromatic-primary-600: #2a43e8;
+  --hop-monochromatic-primary-500: #3b57ff;
+  --hop-monochromatic-primary-400: #4767fe;
+  --hop-monochromatic-primary-300: #6c8ffd;
+  --hop-monochromatic-primary-200: #95b1ff;
+  --hop-monochromatic-primary-100: #b9cbff;
+  --hop-monochromatic-primary-75: #d6e0ff;
+  --hop-monochromatic-primary-50: #e6ebff;
+  --hop-monochromatic-primary-25: #f5f6ff;
   --hop-space-inline-xl: var(--hop-space-320);
   --hop-space-inline-lg: var(--hop-space-240);
   --hop-space-inline-md: var(--hop-space-160);
@@ -351,6 +611,11 @@
   --hop-elevation-lifted: var(--hop-shadow-md);
   --hop-elevation-raised: var(--hop-shadow-sm);
   --hop-elevation-none: var(--hop-shadow-none);
+  --hop-text-ondark: var(--hop-samoyed);
+  --hop-text-onlight: var(--hop-rock-800);
+  --hop-unavailable-strong: var(--hop-rock-100);
+  --hop-unavailable-weak: var(--hop-rock-50);
+  --hop-unavailable: var(--hop-rock-75);
   --hop-status-positive-text: var(--hop-moss-700);
   --hop-status-positive-surface: var(--hop-moss-50);
   --hop-status-positive-surface-strong: var(--hop-moss-200);
@@ -445,6 +710,7 @@
   --hop-neutral-surface-hover: var(--hop-rock-25);
   --hop-neutral-surface-strong: var(--hop-rock-800);
   --hop-neutral-border-strong: var(--hop-rock-800);
+  --hop-neutral-border-strong-hover: var(--hop-rock-700);
   --hop-neutral-border-disabled: var(--hop-rock-50);
   --hop-neutral-text-weakest: var(--hop-rock-200);
   --hop-neutral-text: var(--hop-rock-800);
@@ -524,7 +790,7 @@
   --hop-decorative-option7-icon: var(--hop-toad-900);
   --hop-decorative-option8-border: var(--hop-amanita-100);
   --hop-decorative-option8-text: var(--hop-amanita-900);
-  --hop-decorative-option8-surface: var(--hop-amanita-100);
+  --hop-decorative-option8-surface: var(--hop-amanita-75);
   --hop-decorative-option8-text-weak: var(--hop-amanita-300);
   --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
   --hop-decorative-option8-surface-hover: var(--hop-amanita-200);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/tokens",
   "author": "Workleap",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "The tokens package.",
   "license": "Apache-2.0",
   "repository": {