@haiilo/catalyst-tokens 0.6.0 → 0.8.0

package/dist/css/_variables.css

@@ -137,11 +137,15 @@
   --cat-color-ui-background-skeleton-highlight: 215, 219, 224;
   --cat-color-ui-background-tooltip: 255, 255, 255;
   --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;
   --cat-color-ui-border-light: 248, 248, 251;
   --cat-color-ui-border-default: 235, 236, 240;
   --cat-color-ui-border-dark: 215, 219, 224;
   --cat-color-ui-border-focus: 0, 113, 255;
   --cat-color-ui-border-input: 215, 219, 224;
+  --cat-color-ui-border-tabs: 215, 219, 224;
+  --cat-color-ui-border-active-tab: 32, 127, 138;
   --cat-color-ui-font-head: 0, 0, 0;
   --cat-color-ui-font-body: 0, 0, 0;
   --cat-color-ui-font-mono: 0, 0, 0;
@@ -196,6 +200,9 @@
   --cat-size-line-mono-m: 1.125rem;
   --cat-size-line-mono-s: 1rem;
   --cat-size-line-mono-xs: 0.875rem;
+  --cat-size-modal-s: 400px;
+  --cat-size-modal-m: 600px;
+  --cat-size-modal-l: 800px;
   --cat-size-screen-xs: 540px;
   --cat-size-screen-s: 768px;
   --cat-size-screen-m: 992px;

package/dist/js/_variables.d.ts

@@ -136,11 +136,15 @@ export const ColorUiBackgroundSkeleton : string;
 export const ColorUiBackgroundSkeletonHighlight : string;
 export const ColorUiBackgroundTooltip : string;
 export const ColorUiBackgroundAvatar : string;
+export const ColorUiBackgroundModalBody : string;
+export const ColorUiBackgroundModalWrapper : string;
 export const ColorUiBorderLight : string;
 export const ColorUiBorderDefault : string;
 export const ColorUiBorderDark : string;
 export const ColorUiBorderFocus : string;
 export const ColorUiBorderInput : string;
+export const ColorUiBorderTabs : string;
+export const ColorUiBorderActiveTab : string;
 export const ColorUiFontHead : string;
 export const ColorUiFontBody : string;
 export const ColorUiFontMono : string;
@@ -195,6 +199,9 @@ export const SizeLineMonoL : string;
 export const SizeLineMonoM : string;
 export const SizeLineMonoS : string;
 export const SizeLineMonoXs : string;
+export const SizeModalS : string;
+export const SizeModalM : string;
+export const SizeModalL : string;
 export const SizeScreenXs : string;
 export const SizeScreenS : string;
 export const SizeScreenM : string;

package/dist/js/_variables.js

@@ -136,11 +136,15 @@ export const ColorUiBackgroundSkeleton = "#ebecf0";
 export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
 export const ColorUiBackgroundTooltip = "#ffffff";
 export const ColorUiBackgroundAvatar = "#697687";
+export const ColorUiBackgroundModalBody = "#ffffff";
+export const ColorUiBackgroundModalWrapper = "#000000";
 export const ColorUiBorderLight = "#f8f8fb";
 export const ColorUiBorderDefault = "#ebecf0";
 export const ColorUiBorderDark = "#d7dbe0";
 export const ColorUiBorderFocus = "#0071ff";
 export const ColorUiBorderInput = "#d7dbe0";
+export const ColorUiBorderTabs = "#d7dbe0";
+export const ColorUiBorderActiveTab = "#207f8a";
 export const ColorUiFontHead = "#000000";
 export const ColorUiFontBody = "#000000";
 export const ColorUiFontMono = "#000000";
@@ -195,6 +199,9 @@ export const SizeLineMonoL = "1.25rem";
 export const SizeLineMonoM = "1.125rem";
 export const SizeLineMonoS = "1rem";
 export const SizeLineMonoXs = "0.875rem";
+export const SizeModalS = "400rem";
+export const SizeModalM = "600rem";
+export const SizeModalL = "800rem";
 export const SizeScreenXs = "540rem";
 export const SizeScreenS = "768rem";
 export const SizeScreenM = "992rem";

package/dist/scss/_variables.scss

@@ -22,6 +22,9 @@ $cat-size-screen-l: 1200px !default;
 $cat-size-screen-m: 992px !default;
 $cat-size-screen-s: 768px !default;
 $cat-size-screen-xs: 540px !default;
+$cat-size-modal-l: 800px !default;
+$cat-size-modal-m: 600px !default;
+$cat-size-modal-s: 400px !default;
 $cat-size-line-mono-xs: 0.875rem !default;
 $cat-size-line-mono-s: 1rem !default;
 $cat-size-line-mono-m: 1.125rem !default;
@@ -156,10 +159,14 @@ $cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-40
 $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;
 $cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-neutral-900) !default;
+$cat-color-ui-border-active-tab: $cat-color-base-brand-400 !default;
+$cat-color-ui-border-tabs: $cat-color-base-neutral-300 !default;
 $cat-color-ui-border-input: $cat-color-base-neutral-300 !default;
 $cat-color-ui-border-dark: $cat-color-base-neutral-300 !default;
 $cat-color-ui-border-default: $cat-color-base-neutral-200 !default;
 $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-skeleton-highlight: $cat-color-base-neutral-300 !default;
@@ -387,14 +394,20 @@ $tokens: (
         'skeleton': $cat-color-ui-background-skeleton,
         'skeletonHighlight': $cat-color-ui-background-skeleton-highlight,
         'tooltip': $cat-color-ui-background-tooltip,
-        'avatar': $cat-color-ui-background-avatar
+        'avatar': $cat-color-ui-background-avatar,
+        'modal': (
+          'body': $cat-color-ui-background-modal-body,
+          'wrapper': $cat-color-ui-background-modal-wrapper
+        )
       ),
       'border': (
         'light': $cat-color-ui-border-light,
         'default': $cat-color-ui-border-default,
         'dark': $cat-color-ui-border-dark,
         'focus': $cat-color-ui-border-focus,
-        'input': $cat-color-ui-border-input
+        'input': $cat-color-ui-border-input,
+        'tabs': $cat-color-ui-border-tabs,
+        'activeTab': $cat-color-ui-border-active-tab
       ),
       'font': (
         'head': $cat-color-ui-font-head,
@@ -485,6 +498,11 @@ $tokens: (
         'xs': $cat-size-line-mono-xs
       )
     ),
+    'modal': (
+      's': $cat-size-modal-s,
+      'm': $cat-size-modal-m,
+      'l': $cat-size-modal-l
+    ),
     'screen': (
       'xs': $cat-size-screen-xs,
       's': $cat-size-screen-s,

package/package.json

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