@haiilo/catalyst-tokens 0.10.5 → 0.13.0

package/dist/css/_variables.css

@@ -135,7 +135,7 @@
   --cat-color-ui-background-input-disabled: 248, 248, 251;
   --cat-color-ui-background-skeleton: 235, 236, 240;
   --cat-color-ui-background-skeleton-highlight: 215, 219, 224;
-  --cat-color-ui-background-tooltip: 255, 255, 255;
+  --cat-color-ui-background-tooltip: 0, 0, 0;
   --cat-color-ui-background-avatar: 105, 118, 135;
   --cat-color-ui-background-modal-body: 255, 255, 255;
   --cat-color-ui-background-modal-wrapper: 0, 0, 0;
@@ -151,7 +151,7 @@
   --cat-color-ui-font-mono: 0, 0, 0;
   --cat-color-ui-font-muted: 105, 118, 135;
   --cat-color-ui-font-quote: 0, 0, 0;
-  --cat-color-ui-font-tooltip: 0, 0, 0;
+  --cat-color-ui-font-tooltip: 255, 255, 255;
   --cat-color-ui-font-avatar: 255, 255, 255;
   --cat-font-family-head: Lato;
   --cat-font-family-body: Lato;
@@ -160,11 +160,21 @@
   --cat-font-weight-body: 400;
   --cat-font-weight-mono: 400;
   --cat-opacity-disabled: 0.65;
-  --cat-size-base-xl: 3.5rem;
-  --cat-size-base-l: 3rem;
-  --cat-size-base-m: 2.5rem;
-  --cat-size-base-s: 2rem;
-  --cat-size-base-xs: 1.5rem;
+  --cat-size-badge-padding-horizontal-xl: 1rem;
+  --cat-size-badge-padding-horizontal-l: 1rem;
+  --cat-size-badge-padding-horizontal-m: 0.75rem;
+  --cat-size-badge-padding-horizontal-s: 0.5rem;
+  --cat-size-badge-padding-horizontal-xs: 0.25rem;
+  --cat-size-badge-height-xl: 3rem;
+  --cat-size-badge-height-l: 2.5rem;
+  --cat-size-badge-height-m: 2rem;
+  --cat-size-badge-height-s: 1.5rem;
+  --cat-size-badge-height-xs: 1rem;
+  --cat-size-badge-font-xl: 18px;
+  --cat-size-badge-font-l: 15px;
+  --cat-size-badge-font-m: 13px;
+  --cat-size-badge-font-s: 12px;
+  --cat-size-badge-font-xs: 12px;
   --cat-size-border-radius-l: 0.5rem;
   --cat-size-border-radius-m: 0.25rem;
   --cat-size-border-radius-s: 0.125rem;

package/dist/js/_variables.d.ts

@@ -159,11 +159,21 @@ export const FontWeightHead : number;
 export const FontWeightBody : number;
 export const FontWeightMono : number;
 export const OpacityDisabled : number;
-export const SizeBaseXl : string;
-export const SizeBaseL : string;
-export const SizeBaseM : string;
-export const SizeBaseS : string;
-export const SizeBaseXs : string;
+export const SizeBadgePaddingHorizontalXl : string;
+export const SizeBadgePaddingHorizontalL : string;
+export const SizeBadgePaddingHorizontalM : string;
+export const SizeBadgePaddingHorizontalS : string;
+export const SizeBadgePaddingHorizontalXs : string;
+export const SizeBadgeHeightXl : string;
+export const SizeBadgeHeightL : string;
+export const SizeBadgeHeightM : string;
+export const SizeBadgeHeightS : string;
+export const SizeBadgeHeightXs : string;
+export const SizeBadgeFontXl : string;
+export const SizeBadgeFontL : string;
+export const SizeBadgeFontM : string;
+export const SizeBadgeFontS : string;
+export const SizeBadgeFontXs : string;
 export const SizeBorderRadiusL : string;
 export const SizeBorderRadiusM : string;
 export const SizeBorderRadiusS : string;

package/dist/js/_variables.js

@@ -134,7 +134,7 @@ export const ColorUiBackgroundInput = "#ffffff";
 export const ColorUiBackgroundInputDisabled = "#f8f8fb";
 export const ColorUiBackgroundSkeleton = "#ebecf0";
 export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
-export const ColorUiBackgroundTooltip = "#ffffff";
+export const ColorUiBackgroundTooltip = "#000000";
 export const ColorUiBackgroundAvatar = "#697687";
 export const ColorUiBackgroundModalBody = "#ffffff";
 export const ColorUiBackgroundModalWrapper = "#000000";
@@ -150,7 +150,7 @@ export const ColorUiFontBody = "#000000";
 export const ColorUiFontMono = "#000000";
 export const ColorUiFontMuted = "#697687";
 export const ColorUiFontQuote = "#000000";
-export const ColorUiFontTooltip = "#000000";
+export const ColorUiFontTooltip = "#ffffff";
 export const ColorUiFontAvatar = "#ffffff";
 export const FontFamilyHead = "Lato";
 export const FontFamilyBody = "Lato";
@@ -159,11 +159,21 @@ export const FontWeightHead = 500;
 export const FontWeightBody = 400;
 export const FontWeightMono = 400;
 export const OpacityDisabled = 0.65;
-export const SizeBaseXl = "3.5rem";
-export const SizeBaseL = "3rem";
-export const SizeBaseM = "2.5rem";
-export const SizeBaseS = "2rem";
-export const SizeBaseXs = "1.5rem";
+export const SizeBadgePaddingHorizontalXl = "1rem";
+export const SizeBadgePaddingHorizontalL = "1rem";
+export const SizeBadgePaddingHorizontalM = "0.75rem";
+export const SizeBadgePaddingHorizontalS = "0.5rem";
+export const SizeBadgePaddingHorizontalXs = "0.25rem";
+export const SizeBadgeHeightXl = "3rem";
+export const SizeBadgeHeightL = "2.5rem";
+export const SizeBadgeHeightM = "2rem";
+export const SizeBadgeHeightS = "1.5rem";
+export const SizeBadgeHeightXs = "1rem";
+export const SizeBadgeFontXl = "18rem";
+export const SizeBadgeFontL = "15rem";
+export const SizeBadgeFontM = "13rem";
+export const SizeBadgeFontS = "12rem";
+export const SizeBadgeFontXs = "12rem";
 export const SizeBorderRadiusL = "0.5rem";
 export const SizeBorderRadiusM = "0.25rem";
 export const SizeBorderRadiusS = "0.125rem";

package/dist/scss/_variables.scss

@@ -60,11 +60,21 @@ $cat-size-font-head-1: 1.75rem !default;
 $cat-size-border-radius-s: 0.125rem !default;
 $cat-size-border-radius-m: 0.25rem !default;
 $cat-size-border-radius-l: 0.5rem !default;
-$cat-size-base-xs: 1.5rem !default;
-$cat-size-base-s: 2rem !default;
-$cat-size-base-m: 2.5rem !default;
-$cat-size-base-l: 3rem !default;
-$cat-size-base-xl: 3.5rem !default;
+$cat-size-badge-font-xs: 12px !default;
+$cat-size-badge-font-s: 12px !default;
+$cat-size-badge-font-m: 13px !default;
+$cat-size-badge-font-l: 15px !default;
+$cat-size-badge-font-xl: 18px !default;
+$cat-size-badge-height-xs: 1rem !default;
+$cat-size-badge-height-s: 1.5rem !default;
+$cat-size-badge-height-m: 2rem !default;
+$cat-size-badge-height-l: 2.5rem !default;
+$cat-size-badge-height-xl: 3rem !default;
+$cat-size-badge-padding-horizontal-xs: 0.25rem !default;
+$cat-size-badge-padding-horizontal-s: 0.5rem !default;
+$cat-size-badge-padding-horizontal-m: 0.75rem !default;
+$cat-size-badge-padding-horizontal-l: 1rem !default;
+$cat-size-badge-padding-horizontal-xl: 1rem !default;
 $cat-opacity-disabled: 0.65 !default;
 $cat-font-weight-mono: var(--cat-font-weight-mono, 400) !default;
 $cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
@@ -154,7 +164,7 @@ $cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-n
 $cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
 $cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !default;
 $cat-color-ui-font-avatar: $cat-color-base-neutral-0 !default;
-$cat-color-ui-font-tooltip: $cat-color-base-neutral-900 !default;
+$cat-color-ui-font-tooltip: $cat-color-base-neutral-0 !default;
 $cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
 $cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-neutral-900) !default;
 $cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-neutral-900) !default;
@@ -168,7 +178,7 @@ $cat-color-ui-border-light: $cat-color-base-neutral-100 !default;
 $cat-color-ui-background-modal-wrapper: $cat-color-base-neutral-900 !default;
 $cat-color-ui-background-modal-body: $cat-color-base-neutral-0 !default;
 $cat-color-ui-background-avatar: $cat-color-base-neutral-400 !default;
-$cat-color-ui-background-tooltip: $cat-color-base-neutral-0 !default;
+$cat-color-ui-background-tooltip: $cat-color-base-neutral-900 !default;
 $cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
 $cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
 $cat-color-ui-background-input-disabled: $cat-color-base-neutral-100 !default;
@@ -436,12 +446,30 @@ $tokens: (
     'disabled': $cat-opacity-disabled
   ),
   'size': (
-    'base': (
-      'xl': $cat-size-base-xl,
-      'l': $cat-size-base-l,
-      'm': $cat-size-base-m,
-      's': $cat-size-base-s,
-      'xs': $cat-size-base-xs
+    'badge': (
+      'padding': (
+        'horizontal': (
+          'xl': $cat-size-badge-padding-horizontal-xl,
+          'l': $cat-size-badge-padding-horizontal-l,
+          'm': $cat-size-badge-padding-horizontal-m,
+          's': $cat-size-badge-padding-horizontal-s,
+          'xs': $cat-size-badge-padding-horizontal-xs
+        )
+      ),
+      'height': (
+        'xl': $cat-size-badge-height-xl,
+        'l': $cat-size-badge-height-l,
+        'm': $cat-size-badge-height-m,
+        's': $cat-size-badge-height-s,
+        'xs': $cat-size-badge-height-xs
+      ),
+      'font': (
+        'xl': $cat-size-badge-font-xl,
+        'l': $cat-size-badge-font-l,
+        'm': $cat-size-badge-font-m,
+        's': $cat-size-badge-font-s,
+        'xs': $cat-size-badge-font-xs
+      )
     ),
     'border': (
       'radius': (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst-tokens",
-  "version": "0.10.5",
+  "version": "0.13.0",
   "description": "Design tokens for Catalyst Design System",
   "license": "MIT",
   "repository": {