@haiilo/catalyst-tokens 0.7.1 → 0.8.0

package/dist/css/_variables.css

@@ -137,6 +137,8 @@
   --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;
@@ -198,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,6 +136,8 @@ 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;
@@ -197,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,6 +136,8 @@ 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";
@@ -197,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;
@@ -162,6 +165,8 @@ $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;
@@ -389,7 +394,11 @@ $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,
@@ -489,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.7.1",
+  "version": "0.8.0",
   "description": "Design tokens for Catalyst Design System",
   "license": "MIT",
   "repository": {