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

Comparing version 0.14.0 to 0.15.0-new-focus-keyboard.3

dist/main.js

@@ -785,30 +785,21 @@ 'use strict';
 
+const shadows$1 = {
+  50: "0 4px 16px rgba(5, 0, 56, 0.07)",
+  100: "0 8px 32px rgba(5, 0, 56, 0.03)",
+  focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard"
+};
+
 const shadows = {
-  dark: {
-    50: "0px 0px 8px 0px rgba(9,9,9,.65)",
-    100: "0px 0px 16px 0px rgba(9,9,9,.65)"
-  },
-  light: {
-    50: "0 4px 16px #05003812",
-    100: "0 8px 32px #05003808"
-  }
+  50: "0 0 8px 0 rgba(9,9,9,.65)",
+  100: "0 0 16px 0 rgba(9,9,9,.65)",
+  focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard"
 };
-const focus = {
-  "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-small-error": "0 0 0 2px $colors$border-focus-error-outer, inset 0 0 0 2px $colors$border-focus-error-middle, inset 0 0 0 3px $colors$border-focus-error-inner",
-  "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$green-100",
-  "focus-v1": "0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard"
-};
 
 const light = Object.freeze({
   colors: colors$1,
-  shadows: { ...shadows.light, ...focus }
+  shadows: shadows$1
 });
 const dark = Object.freeze({
   colors: colors,
-  shadows: { ...shadows.dark, ...focus }
+  shadows: shadows
 });
@@ -815,0 +806,0 @@

dist/module.js

@@ -781,30 +781,21 @@ const colors$1 = {
 
+const shadows$1 = {
+  50: "0 4px 16px rgba(5, 0, 56, 0.07)",
+  100: "0 8px 32px rgba(5, 0, 56, 0.03)",
+  focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard"
+};
+
 const shadows = {
-  dark: {
-    50: "0px 0px 8px 0px rgba(9,9,9,.65)",
-    100: "0px 0px 16px 0px rgba(9,9,9,.65)"
-  },
-  light: {
-    50: "0 4px 16px #05003812",
-    100: "0 8px 32px #05003808"
-  }
+  50: "0 0 8px 0 rgba(9,9,9,.65)",
+  100: "0 0 16px 0 rgba(9,9,9,.65)",
+  focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard"
 };
-const focus = {
-  "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-small-error": "0 0 0 2px $colors$border-focus-error-outer, inset 0 0 0 2px $colors$border-focus-error-middle, inset 0 0 0 3px $colors$border-focus-error-inner",
-  "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$green-100",
-  "focus-v1": "0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard"
-};
 
 const light = Object.freeze({
   colors: colors$1,
-  shadows: { ...shadows.light, ...focus }
+  shadows: shadows$1
 });
 const dark = Object.freeze({
   colors: colors,
-  shadows: { ...shadows.dark, ...focus }
+  shadows: shadows
 });
@@ -811,0 +802,0 @@

dist/types.d.ts

@@ -8,13 +8,3 @@ import { Colors } from '@mirohq/design-tokens';
 
-declare const focus: {
-    readonly '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";
-    readonly '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";
-    readonly '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";
-    readonly '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";
-    readonly 'focus-small-error': "0 0 0 2px $colors$border-focus-error-outer, inset 0 0 0 2px $colors$border-focus-error-middle, inset 0 0 0 3px $colors$border-focus-error-inner";
-    readonly '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";
-    readonly 'focus-controls-success': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$green-100";
-    readonly 'focus-v1': "0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard";
-};
-type AliasShadows = 50 | 100 | keyof typeof focus;
+type AliasShadows = 50 | 100 | 'focus';
 
@@ -21,0 +11,0 @@ type Color = `$${Colors}` | `$${AliasColors}` | (string & {});

package.json

 {
   "name": "@mirohq/design-system-themes",
-  "version": "0.14.0",
+  "version": "0.15.0-new-focus-keyboard.3",
   "description": "",
@@ -5,0 +5,0 @@ "author": "Miro",

No alert changes

Improved metrics

Total package byte prevSize

259412

increased by11.06%

Lines of code

2843

increased by24.91%

No dependency changes