@mirohq/design-system-themes - npm Package Compare versions

Comparing version 0.6.0-colors.1 to 0.6.0-colors.2

dist/main.js

@@ -56,4 +56,4 @@ 'use strict';
   "border-focus-success-inner": "$background-neutrals",
-  "border-focus-success-middle": "$green-500",
-  "border-focus-success-outer": "$green-250",
+  "border-focus-success-middle": "$green-400",
+  "border-focus-success-outer": "$green-200",
   "border-neutrals": "$gray-250",
@@ -134,5 +134,15 @@ "border-neutrals-active": "$gray-350",
 
+const focusShadows = {
+  "focus-small": "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner",
+  "focus-small-outline": "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner",
+  "focus-large": "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer",
+  "focus-controls": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer",
+  "focus-controls-error": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover",
+  "focus-controls-success": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success"
+};
+
 const shadows$1 = Object.freeze({
   50: "0 4px 16px #05003812",
-  100: "0 8px 32px #05003808"
+  100: "0 8px 32px #05003808",
+  ...focusShadows
 });
@@ -196,4 +206,4 @@
   "border-focus-success-inner": "$background-neutrals",
-  "border-focus-success-middle": "$green-500",
-  "border-focus-success-outer": "$green-650",
+  "border-focus-success-middle": "$green-350",
+  "border-focus-success-outer": "$green-550",
   "border-neutrals": "$gray-550",
@@ -276,3 +286,4 @@ "border-neutrals-active": "$gray-450",
   50: "0px 0px 8px 0px rgba(9,9,9,.65)",
-  100: "0px 0px 16px 0px rgba(9,9,9,.65)"
+  100: "0px 0px 16px 0px rgba(9,9,9,.65)",
+  ...focusShadows
 });
@@ -279,0 +290,0 @@

dist/module.js

@@ -52,4 +52,4 @@ const colors$1 = {
   "border-focus-success-inner": "$background-neutrals",
-  "border-focus-success-middle": "$green-500",
-  "border-focus-success-outer": "$green-250",
+  "border-focus-success-middle": "$green-400",
+  "border-focus-success-outer": "$green-200",
   "border-neutrals": "$gray-250",
@@ -130,5 +130,15 @@ "border-neutrals-active": "$gray-350",
 
+const focusShadows = {
+  "focus-small": "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner",
+  "focus-small-outline": "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner",
+  "focus-large": "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer",
+  "focus-controls": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer",
+  "focus-controls-error": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover",
+  "focus-controls-success": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success"
+};
+
 const shadows$1 = Object.freeze({
   50: "0 4px 16px #05003812",
-  100: "0 8px 32px #05003808"
+  100: "0 8px 32px #05003808",
+  ...focusShadows
 });
@@ -192,4 +202,4 @@
   "border-focus-success-inner": "$background-neutrals",
-  "border-focus-success-middle": "$green-500",
-  "border-focus-success-outer": "$green-650",
+  "border-focus-success-middle": "$green-350",
+  "border-focus-success-outer": "$green-550",
   "border-neutrals": "$gray-550",
@@ -272,3 +282,4 @@ "border-neutrals-active": "$gray-450",
   50: "0px 0px 8px 0px rgba(9,9,9,.65)",
-  100: "0px 0px 16px 0px rgba(9,9,9,.65)"
+  100: "0px 0px 16px 0px rgba(9,9,9,.65)",
+  ...focusShadows
 });
@@ -275,0 +286,0 @@

dist/types.d.ts

@@ -5,2 +5,13 @@ import { tokens } from '@mirohq/design-tokens';
 
+declare const focusShadows: {
+    'focus-small': string;
+    'focus-small-outline': string;
+    'focus-large': string;
+    'focus-controls': string;
+    'focus-controls-error': string;
+    'focus-controls-success': string;
+};
+
+declare type AliasShadowKeys = 50 | 100 | keyof typeof focusShadows;
+
 declare type GlobalOrRawColor = `$${tokens.Colors}` | (string & {});
@@ -10,5 +21,9 @@ declare type AliasColors = {
 };
-interface Theme {
+declare type AliasShadows = {
+    [Key in AliasShadowKeys]?: string;
+};
+declare type Theme = {
     colors: Partial<AliasColors>;
-}
+    shadows: Partial<AliasShadows>;
+};
 
@@ -21,2 +36,2 @@ declare const light: Theme;
 
-export { AliasColors, GlobalOrRawColor, Theme, base, dark, light };
+export { AliasColors, AliasColorsKeys, AliasShadowKeys, AliasShadows, GlobalOrRawColor, Theme, base, dark, light };

package.json

 {
   "name": "@mirohq/design-system-themes",
-  "version": "0.6.0-colors.1",
+  "version": "0.6.0-colors.2",
   "description": "",
@@ -31,3 +31,3 @@ "author": "Miro",
   "dependencies": {
-    "@mirohq/design-tokens": "^4.0.0-colors.1"
+    "@mirohq/design-tokens": "^4.0.0-colors.2"
   },
@@ -34,0 +34,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98654

increased by9.56%

Lines of code

1049

increased by9.04%

Dependency changes

• Updated@mirohq/design-tokens@^4.0.0-colors.2