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

Comparing version 0.7.2 to 0.7.3-style-dictionary.0

dist/main.js

@@ -6,130 +6,244 @@ 'use strict';
 const colors$1 = {
-  "background-alpha-active": "#0909094D",
-  "background-alpha-hover": "#09090933",
-  "background-danger-prominent": "$red-500",
-  "background-danger-prominent-active": "$red-600",
-  "background-danger-prominent-hover": "$red-550",
-  "background-danger-subtle": "$red-100",
-  "background-danger-subtle-active": "$red-200",
-  "background-danger-subtle-hover": "$red-150",
+  "background-alpha": "$alphaGray100",
+  "background-alpha-subtle": "$alphaGray50",
+  "background-neutrals-overlay": "$alphaBlack300",
+  "background-neutrals-overlay-subtle": "$alphaBlack200",
+  "background-danger-prominent": "$red500",
+  "background-danger-prominent-hover": "$red550",
+  "background-danger-prominent-pressed": "$red600",
+  "background-danger-subtle": "$red50",
+  "background-danger-subtle-hover": "$red100",
+  "background-danger-subtle-pressed": "$red150",
   "background-neutrals": "$white",
-  "background-neutrals-active": "$gray-150",
-  "background-neutrals-container": "$white",
-  "background-neutrals-controls-disabled": "$gray-250",
-  "background-neutrals-disabled": "$gray-150",
-  "background-neutrals-hover": "$gray-100",
-  "background-neutrals-inactive": "$gray-450",
-  "background-neutrals-inactive-hover": "$gray-500",
-  "background-neutrals-inverted": "$gray-950",
-  "background-neutrals-inverted-subtle": "$gray-800",
-  "background-neutrals-page": "$gray-100",
-  "background-neutrals-page-subtle": "$gray-150",
-  "background-neutrals-scrollbar": "$gray-300",
-  "background-neutrals-scrollbar-active": "$gray-400",
-  "background-neutrals-scrollbar-hover": "$gray-350",
-  "background-neutrals-subtle": "$gray-100",
-  "background-neutrals-subtle-active": "$gray-200",
-  "background-neutrals-subtle-hover": "$gray-150",
-  "background-primary-prominent": "$blue-500",
-  "background-primary-prominent-active": "$blue-600",
-  "background-primary-prominent-hover": "$blue-550",
-  "background-primary-prominent-selected": "$blue-500",
-  "background-primary-subtle": "$blue-100",
-  "background-primary-subtle-active": "$blue-200",
-  "background-primary-subtle-hover": "$blue-150",
-  "background-primary-subtle-selected": "$blue-200",
-  "background-success": "$green-100",
-  "background-success-prominent": "$green-500",
-  "background-success-prominent-active": "$green-700",
-  "background-success-prominent-hover": "$green-550",
-  "background-warning-prominent": "$yellow-500",
-  "background-warning-subtle": "$yellow-100",
-  "border-danger": "$red-550",
-  "border-danger-active": "$red-650",
-  "border-danger-hover": "$red-600",
-  "border-focus-error-inner": "$white",
-  "border-focus-error-middle": "$red-400",
-  "border-focus-error-outer": "$red-200",
-  "border-focus-inner": "$white",
-  "border-focus-middle": "$blue-400",
-  "border-focus-outer": "$blue-200",
-  "border-focus-success-inner": "$white",
-  "border-focus-success-middle": "$green-400",
-  "border-focus-success-outer": "$green-200",
-  "border-neutrals": "$gray-250",
-  "border-neutrals-active": "$gray-350",
-  "border-neutrals-controls": "$gray-200",
-  "border-neutrals-controls-disabled": "$gray-150",
-  "border-neutrals-disabled": "$gray-150",
-  "border-neutrals-hover": "$gray-300",
+  "background-neutrals-control": "$gray300",
+  "background-neutrals-control-hover": "$gray350",
+  "background-neutrals-control-pressed": "$gray400",
+  "background-neutrals-disabled": "$alphaBlack100",
+  "background-neutrals-hover": "$gray100",
+  "background-neutrals-inverted": "$gray950",
+  "background-neutrals-inverted-subtle": "$gray800",
+  "background-neutrals-pressed": "$gray150",
+  "background-neutrals-subtle": "$gray100",
+  "background-neutrals-subtle-hover": "$gray150",
+  "background-neutrals-subtle-pressed": "$gray200",
+  "background-neutrals-transparent": "$transparent",
+  "background-primary-prominent": "$blue500",
+  "background-primary-prominent-hover": "$blue550",
+  "background-primary-prominent-pressed": "$blue600",
+  "background-primary-prominent-selected": "$blue500",
+  "background-primary-subtle": "$blue100",
+  "background-primary-subtle-hover": "$blue150",
+  "background-primary-subtle-pressed": "$blue200",
+  "background-primary-subtle-selected": "$blue200",
+  "background-success-prominent": "$green500",
+  "background-success-prominent-hover": "$green550",
+  "background-success-prominent-pressed": "$green600",
+  "background-success-subtle": "$green50",
+  "background-warning-prominent": "$yellow500",
+  "background-warning-subtle": "$yellow50",
+  "border-danger": "$red500",
+  "border-danger-hover": "$red550",
+  "border-danger-pressed": "$red600",
+  "focus-keyboard": "#2B4DF8",
+  "border-neutrals": "$gray200",
+  "border-neutrals-disabled": "$alphaGray50",
+  "border-neutrals-hover": "$gray300",
   "border-neutrals-inverted": "$white",
-  "border-neutrals-subtle": "$gray-150",
-  "border-neutrals-text": "$gray-900",
-  "border-neutrals-text-active": "$gray-950",
-  "border-neutrals-text-hover": "$gray-950",
-  "border-neutrals-text-subtle": "$gray-500",
-  "border-neutrals-text-subtle-active": "$gray-600",
-  "border-neutrals-text-subtle-hover": "$gray-550",
+  "border-neutrals-pressed": "$gray350",
+  "border-neutrals-subtle": "$gray100",
+  "border-neutrals-subtle-hover": "$gray200",
+  "border-neutrals-subtle-pressed": "$gray250",
   "border-neutrals-transparent": "$transparent",
-  "border-primary": "$blue-500",
-  "border-primary-active": "$blue-600",
-  "border-primary-hover": "$blue-550",
-  "border-primary-inverted": "$blue-100",
-  "border-success": "$green-550",
-  "border-success-active": "$green-650",
-  "border-success-hover": "$green-600",
-  "border-warning": "$yellow-500",
-  "icon-danger": "$red-550",
-  "icon-danger-active": "$red-650",
-  "icon-danger-hover": "$red-600",
-  "icon-danger-inverted": "$white",
-  "icon-neutrals": "$gray-900",
-  "icon-neutrals-disabled": "$gray-350",
-  "icon-neutrals-inactive": "$gray-450",
-  "icon-neutrals-inactive-hover": "$gray-500",
-  "icon-neutrals-inverted": "$gray-50",
-  "icon-neutrals-search": "$gray-500",
-  "icon-neutrals-subtle": "$gray-500",
-  "icon-neutrals-text": "$gray-700",
-  "icon-primary": "$blue-500",
-  "icon-primary-active": "$blue-600",
-  "icon-primary-hover": "$blue-550",
-  "icon-primary-inverted": "$white",
-  "icon-primary-selected": "$blue-500",
-  "icon-success": "$green-550",
-  "icon-success-active": "$green-650",
-  "icon-success-hover": "$green-600",
-  "icon-success-inverted": "$green-200",
-  "icon-warning": "$yellow-700",
-  "icon-warning-prominent": "$yellow-700",
-  "icon-warning-subtle": "$yellow-600",
-  "text-danger": "$red-550",
-  "text-danger-active": "$red-650",
-  "text-danger-hover": "$red-600",
-  "text-danger-inverted": "$white",
-  "text-neutrals": "$gray-900",
-  "text-neutrals-active": "$gray-950",
-  "text-neutrals-disabled": "$gray-350",
-  "text-neutrals-hover": "$gray-950",
-  "text-neutrals-inverted": "$gray-50",
-  "text-neutrals-placeholder": "$gray-500",
-  "text-neutrals-placeholder-only": "$gray-500",
-  "text-neutrals-subtle": "$gray-500",
-  "text-neutrals-subtle-active": "$gray-600",
-  "text-neutrals-subtle-hover": "$gray-550",
-  "text-primary": "$blue-500",
-  "text-primary-active": "$blue-600",
-  "text-primary-hover": "$blue-550",
-  "text-primary-inverted": "$white",
-  "text-primary-inverted-subtle": "$blue-300",
-  "text-primary-selected": "$blue-500",
-  "text-success": "$green-550",
-  "text-success-active": "$green-650",
-  "text-success-hover": "$green-600",
-  "text-success-inverted": "$green-200",
-  "text-warning": "$yellow-700",
-  "text-warning-subtle": "$yellow-600"
+  "border-primary": "$blue500",
+  "border-primary-hover": "$blue550",
+  "border-primary-inverted": "$blue50",
+  "border-primary-pressed": "$blue600",
+  "border-primary-selected": "$blue500",
+  "border-success": "$green500",
+  "border-success-hover": "$green550",
+  "border-success-pressed": "$green600",
+  "border-warning": "$yellow500",
+  "icon-danger": "$red500",
+  "icon-danger-hover": "$red550",
+  "icon-danger-inverted": "$red50",
+  "icon-danger-pressed": "$red600",
+  "icon-neutrals": "$gray900",
+  "icon-neutrals-disabled": "$alphaGray600",
+  "icon-neutrals-hover": "$gray950",
+  "icon-neutrals-inverted": "$white",
+  "icon-neutrals-inverted-hover": "$gray50",
+  "icon-neutrals-inverted-subtle": "$alphaWhite700",
+  "icon-neutrals-inverted-subtle-hover": "$alphaWhite600",
+  "icon-neutrals-placeholder": "$gray500",
+  "icon-neutrals-pressed": "$gray950",
+  "icon-neutrals-subtle": "$gray600",
+  "icon-neutrals-subtle-hover": "$gray650",
+  "icon-neutrals-subtle-pressed": "$gray700",
+  "icon-primary": "$blue500",
+  "icon-primary-hover": "$blue550",
+  "icon-primary-inverted": "$blue50",
+  "icon-primary-inverted-hover": "$blue100",
+  "icon-primary-pressed": "$blue600",
+  "icon-primary-selected": "$blue500",
+  "icon-success": "$green600",
+  "icon-success-hover": "$green650",
+  "icon-success-inverted": "$green50",
+  "icon-success-pressed": "$green700",
+  "icon-warning": "$yellow800",
+  "text-danger": "$red500",
+  "text-danger-hover": "$red550",
+  "text-danger-inverted": "$red50",
+  "text-danger-pressed": "$red600",
+  "text-neutrals": "$gray900",
+  "text-neutrals-disabled": "$alphaGray300",
+  "text-neutrals-hover": "$gray950",
+  "text-neutrals-inverted": "$white",
+  "text-neutrals-inverted-hover": "$gray50",
+  "text-neutrals-inverted-subtle": "$alphaWhite700",
+  "text-neutrals-inverted-subtle-hover": "$alphaWhite600",
+  "text-neutrals-placeholder": "$gray500",
+  "text-neutrals-pressed": "$gray950",
+  "text-neutrals-subtle": "$gray600",
+  "text-neutrals-subtle-hover": "$gray650",
+  "text-neutrals-subtle-pressed": "$gray700",
+  "text-primary": "$blue500",
+  "text-primary-hover": "$blue550",
+  "text-primary-inverted": "$blue50",
+  "text-primary-inverted-subtle": "$blue100",
+  "text-primary-pressed": "$blue600",
+  "text-primary-selected": "$blue500",
+  "text-success": "$green600",
+  "text-success-hover": "$green650",
+  "text-success-inverted": "$green50",
+  "text-success-pressed": "$green700",
+  "text-warning": "$yellow800"
 };
 
-const focusShadows = {
+const colors = {
+  "background-alpha": "$alphaBlack100",
+  "background-alpha-subtle": "$alphaBlack50",
+  "background-neutrals-overlay": "$alphaBlack300",
+  "background-neutrals-overlay-subtle": "$alphaBlack200",
+  "background-danger-prominent": "$red500",
+  "background-danger-prominent-hover": "$red450",
+  "background-danger-prominent-pressed": "$red400",
+  "background-danger-subtle": "$red600",
+  "background-danger-subtle-hover": "$red550",
+  "background-danger-subtle-pressed": "$red500",
+  "background-neutrals": "$gray950",
+  "background-neutrals-control": "$gray700",
+  "background-neutrals-control-hover": "$gray650",
+  "background-neutrals-control-pressed": "$gray600",
+  "background-neutrals-disabled": "$alphaWhite100",
+  "background-neutrals-hover": "$gray900",
+  "background-neutrals-inverted": "$white",
+  "background-neutrals-inverted-subtle": "$gray150",
+  "background-neutrals-pressed": "$gray850",
+  "background-neutrals-subtle": "$gray750",
+  "background-neutrals-subtle-hover": "$gray700",
+  "background-neutrals-subtle-pressed": "$gray650",
+  "background-neutrals-transparent": "$transparent",
+  "background-primary-prominent": "$blue400",
+  "background-primary-prominent-hover": "$blue350",
+  "background-primary-prominent-pressed": "$blue300",
+  "background-primary-prominent-selected": "$blue400",
+  "background-primary-subtle": "$blue700",
+  "background-primary-subtle-hover": "$blue650",
+  "background-primary-subtle-pressed": "$blue600",
+  "background-primary-subtle-selected": "$blue700",
+  "background-success-prominent": "$green500",
+  "background-success-prominent-hover": "$green450",
+  "background-success-prominent-pressed": "$green400",
+  "background-success-subtle": "$green600",
+  "background-warning-prominent": "$yellow500",
+  "background-warning-subtle": "$yellow50",
+  "border-danger": "$red500",
+  "border-danger-hover": "$red450",
+  "border-danger-pressed": "$red400",
+  "focus-keyboard": "#2B4DF8",
+  "border-neutrals": "$gray550",
+  "border-neutrals-disabled": "$alphaGray50",
+  "border-neutrals-hover": "$gray400",
+  "border-neutrals-inverted": "$gray950",
+  "border-neutrals-pressed": "$gray350",
+  "border-neutrals-subtle": "$gray800",
+  "border-neutrals-subtle-hover": "$gray700",
+  "border-neutrals-subtle-pressed": "$gray650",
+  "border-neutrals-transparent": "$transparent",
+  "border-primary": "$blue400",
+  "border-primary-hover": "$blue350",
+  "border-primary-inverted": "$blue900",
+  "border-primary-pressed": "$blue300",
+  "border-primary-selected": "$blue400",
+  "border-success": "$green500",
+  "border-success-hover": "$green450",
+  "border-success-pressed": "$green400",
+  "border-warning": "$yellow500",
+  "icon-danger": "$red400",
+  "icon-danger-hover": "$red350",
+  "icon-danger-inverted": "$red900",
+  "icon-danger-pressed": "$red300",
+  "icon-neutrals": "$gray50",
+  "icon-neutrals-disabled": "$alphaBlack300",
+  "icon-neutrals-hover": "$gray100",
+  "icon-neutrals-inverted": "$gray950",
+  "icon-neutrals-inverted-hover": "$gray900",
+  "icon-neutrals-inverted-subtle": "$alphaBlack700",
+  "icon-neutrals-inverted-subtle-hover": "$alphaBlack800",
+  "icon-neutrals-placeholder": "$gray300",
+  "icon-neutrals-pressed": "$gray150",
+  "icon-neutrals-subtle": "$gray300",
+  "icon-neutrals-subtle-hover": "$gray250",
+  "icon-neutrals-subtle-pressed": "$gray200",
+  "icon-primary": "$blue400",
+  "icon-primary-hover": "$blue350",
+  "icon-primary-inverted": "$blue900",
+  "icon-primary-inverted-hover": "$gray850",
+  "icon-primary-pressed": "$blue300",
+  "icon-primary-selected": "$blue400",
+  "icon-success": "$green400",
+  "icon-success-hover": "$green350",
+  "icon-success-inverted": "$green900",
+  "icon-success-pressed": "$green300",
+  "icon-warning": "$yellow200",
+  "text-danger": "$red500",
+  "text-danger-hover": "$red450",
+  "text-danger-inverted": "$red900",
+  "text-danger-pressed": "$red400",
+  "text-neutrals": "$gray50",
+  "text-neutrals-disabled": "$alphaBlack300",
+  "text-neutrals-hover": "$gray100",
+  "text-neutrals-inverted": "$gray900",
+  "text-neutrals-inverted-hover": "$gray850",
+  "text-neutrals-inverted-subtle": "$alphaBlack700",
+  "text-neutrals-inverted-subtle-hover": "$alphaBlack800",
+  "text-neutrals-placeholder": "$gray300",
+  "text-neutrals-pressed": "$gray150",
+  "text-neutrals-subtle": "$gray300",
+  "text-neutrals-subtle-hover": "$gray250",
+  "text-neutrals-subtle-pressed": "$gray200",
+  "text-primary": "$blue400",
+  "text-primary-hover": "$blue350",
+  "text-primary-inverted": "$blue900",
+  "text-primary-inverted-subtle": "$blue850",
+  "text-primary-pressed": "$blue300",
+  "text-primary-selected": "$blue400",
+  "text-success": "$green400",
+  "text-success-hover": "$green350",
+  "text-success-inverted": "$green900",
+  "text-success-pressed": "$green300",
+  "text-warning": "$yellow200"
+};
+
+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"
+  }
+};
+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",
@@ -144,150 +258,9 @@ "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",
 
-const shadows$1 = Object.freeze({
-  50: "0 4px 16px #05003812",
-  100: "0 8px 32px #05003808",
-  ...focusShadows
-});
-
 const light = Object.freeze({
   colors: colors$1,
-  shadows: shadows$1
+  shadows: { ...shadows.light, ...focus }
 });
-
-const colors = {
-  "background-alpha-active": "#FFFFFF4D",
-  "background-alpha-hover": "#FFFFFF33",
-  "background-danger-prominent": "$red-500",
-  "background-danger-prominent-active": "$red-400",
-  "background-danger-prominent-hover": "$red-450",
-  "background-danger-subtle": "$red-800",
-  "background-danger-subtle-active": "$red-700",
-  "background-danger-subtle-hover": "$red-750",
-  "background-neutrals": "$gray-950",
-  "background-neutrals-active": "$gray-700",
-  "background-neutrals-container": "$gray-850",
-  "background-neutrals-controls-disabled": "$gray-700",
-  "background-neutrals-disabled": "$gray-700",
-  "background-neutrals-hover": "$gray-800",
-  "background-neutrals-inactive": "$gray-500",
-  "background-neutrals-inactive-hover": "$gray-600",
-  "background-neutrals-inverted": "$white",
-  "background-neutrals-inverted-subtle": "$gray-100",
-  "background-neutrals-page": "$gray-850",
-  "background-neutrals-page-subtle": "$gray-800",
-  "background-neutrals-scrollbar": "$gray-700",
-  "background-neutrals-scrollbar-active": "$gray-600",
-  "background-neutrals-scrollbar-hover": "$gray-650",
-  "background-neutrals-subtle": "$gray-750",
-  "background-neutrals-subtle-active": "$gray-650",
-  "background-neutrals-subtle-hover": "$gray-700",
-  "background-primary-prominent": "$blue-500",
-  "background-primary-prominent-active": "$blue-600",
-  "background-primary-prominent-hover": "$blue-550",
-  "background-primary-prominent-selected": "$blue-500",
-  "background-primary-subtle": "$blue-800",
-  "background-primary-subtle-active": "$blue-700",
-  "background-primary-subtle-hover": "$blue-750",
-  "background-primary-subtle-selected": "$blue-700",
-  "background-success": "$green-800",
-  "background-success-prominent": "$green-500",
-  "background-success-prominent-active": "$green-400",
-  "background-success-prominent-hover": "$green-450",
-  "background-warning-prominent": "$yellow-400",
-  "background-warning-subtle": "$yellow-900",
-  "border-danger": "$red-300",
-  "border-danger-active": "$red-200",
-  "border-danger-hover": "$red-250",
-  "border-focus-error-inner": "$gray-950",
-  "border-focus-error-middle": "$red-350",
-  "border-focus-error-outer": "$red-550",
-  "border-focus-inner": "$gray-950",
-  "border-focus-middle": "$blue-350",
-  "border-focus-outer": "$blue-550",
-  "border-focus-success-inner": "$gray-950",
-  "border-focus-success-middle": "$green-350",
-  "border-focus-success-outer": "$green-550",
-  "border-neutrals": "$gray-550",
-  "border-neutrals-active": "$gray-450",
-  "border-neutrals-controls": "$gray-600",
-  "border-neutrals-controls-disabled": "$gray-800",
-  "border-neutrals-disabled": "$gray-800",
-  "border-neutrals-hover": "$gray-500",
-  "border-neutrals-inverted": "$gray-950",
-  "border-neutrals-subtle": "$gray-800",
-  "border-neutrals-text": "$gray-100",
-  "border-neutrals-text-active": "$gray-50",
-  "border-neutrals-text-hover": "$gray-50",
-  "border-neutrals-text-subtle": "$gray-300",
-  "border-neutrals-text-subtle-active": "$gray-100",
-  "border-neutrals-text-subtle-hover": "$gray-200",
-  "border-neutrals-transparent": "$transparent",
-  "border-primary": "$blue-300",
-  "border-primary-active": "$blue-200",
-  "border-primary-hover": "$blue-250",
-  "border-primary-inverted": "$blue-900",
-  "border-success": "$green-300",
-  "border-success-active": "$green-200",
-  "border-success-hover": "$green-250",
-  "border-warning": "$yellow-700",
-  "icon-danger": "$red-200",
-  "icon-danger-active": "$red-100",
-  "icon-danger-hover": "$red-150",
-  "icon-danger-inverted": "$white",
-  "icon-neutrals": "$gray-100",
-  "icon-neutrals-disabled": "$gray-600",
-  "icon-neutrals-inactive": "$gray-400",
-  "icon-neutrals-inactive-hover": "$gray-300",
-  "icon-neutrals-inverted": "$gray-900",
-  "icon-neutrals-search": "$gray-400",
-  "icon-neutrals-subtle": "$gray-200",
-  "icon-neutrals-text": "$gray-300",
-  "icon-primary": "$blue-300",
-  "icon-primary-active": "$blue-200",
-  "icon-primary-hover": "$blue-250",
-  "icon-primary-inverted": "$white",
-  "icon-primary-selected": "$blue-200",
-  "icon-success": "$green-200",
-  "icon-success-active": "$green-100",
-  "icon-success-hover": "$green-150",
-  "icon-success-inverted": "$green-800",
-  "icon-warning": "$yellow-200",
-  "icon-warning-prominent": "$yellow-200",
-  "icon-warning-subtle": "$yellow-300",
-  "text-danger": "$red-200",
-  "text-danger-active": "$red-100",
-  "text-danger-hover": "$red-150",
-  "text-danger-inverted": "$white",
-  "text-neutrals": "$gray-100",
-  "text-neutrals-active": "$gray-50",
-  "text-neutrals-disabled": "$gray-600",
-  "text-neutrals-hover": "$gray-50",
-  "text-neutrals-inverted": "$gray-950",
-  "text-neutrals-placeholder": "$gray-300",
-  "text-neutrals-placeholder-only": "$gray-300",
-  "text-neutrals-subtle": "$gray-300",
-  "text-neutrals-subtle-active": "$gray-100",
-  "text-neutrals-subtle-hover": "$gray-200",
-  "text-primary": "$blue-300",
-  "text-primary-active": "$blue-200",
-  "text-primary-hover": "$blue-250",
-  "text-primary-inverted": "$white",
-  "text-primary-inverted-subtle": "$blue-400",
-  "text-primary-selected": "$blue-300",
-  "text-success": "$green-200",
-  "text-success-active": "$green-100",
-  "text-success-hover": "$green-150",
-  "text-success-inverted": "$green-800",
-  "text-warning": "$yellow-200",
-  "text-warning-subtle": "$yellow-300"
-};
-
-const shadows = Object.freeze({
-  50: "0px 0px 8px 0px rgba(9,9,9,.65)",
-  100: "0px 0px 16px 0px rgba(9,9,9,.65)",
-  ...focusShadows
-});
-
 const dark = Object.freeze({
-  colors,
-  shadows
+  colors: colors,
+  shadows: { ...shadows.dark, ...focus }
 });
@@ -294,0 +267,0 @@

dist/module.js

 const colors$1 = {
-  "background-alpha-active": "#0909094D",
-  "background-alpha-hover": "#09090933",
-  "background-danger-prominent": "$red-500",
-  "background-danger-prominent-active": "$red-600",
-  "background-danger-prominent-hover": "$red-550",
-  "background-danger-subtle": "$red-100",
-  "background-danger-subtle-active": "$red-200",
-  "background-danger-subtle-hover": "$red-150",
+  "background-alpha": "$alphaGray100",
+  "background-alpha-subtle": "$alphaGray50",
+  "background-neutrals-overlay": "$alphaBlack300",
+  "background-neutrals-overlay-subtle": "$alphaBlack200",
+  "background-danger-prominent": "$red500",
+  "background-danger-prominent-hover": "$red550",
+  "background-danger-prominent-pressed": "$red600",
+  "background-danger-subtle": "$red50",
+  "background-danger-subtle-hover": "$red100",
+  "background-danger-subtle-pressed": "$red150",
   "background-neutrals": "$white",
-  "background-neutrals-active": "$gray-150",
-  "background-neutrals-container": "$white",
-  "background-neutrals-controls-disabled": "$gray-250",
-  "background-neutrals-disabled": "$gray-150",
-  "background-neutrals-hover": "$gray-100",
-  "background-neutrals-inactive": "$gray-450",
-  "background-neutrals-inactive-hover": "$gray-500",
-  "background-neutrals-inverted": "$gray-950",
-  "background-neutrals-inverted-subtle": "$gray-800",
-  "background-neutrals-page": "$gray-100",
-  "background-neutrals-page-subtle": "$gray-150",
-  "background-neutrals-scrollbar": "$gray-300",
-  "background-neutrals-scrollbar-active": "$gray-400",
-  "background-neutrals-scrollbar-hover": "$gray-350",
-  "background-neutrals-subtle": "$gray-100",
-  "background-neutrals-subtle-active": "$gray-200",
-  "background-neutrals-subtle-hover": "$gray-150",
-  "background-primary-prominent": "$blue-500",
-  "background-primary-prominent-active": "$blue-600",
-  "background-primary-prominent-hover": "$blue-550",
-  "background-primary-prominent-selected": "$blue-500",
-  "background-primary-subtle": "$blue-100",
-  "background-primary-subtle-active": "$blue-200",
-  "background-primary-subtle-hover": "$blue-150",
-  "background-primary-subtle-selected": "$blue-200",
-  "background-success": "$green-100",
-  "background-success-prominent": "$green-500",
-  "background-success-prominent-active": "$green-700",
-  "background-success-prominent-hover": "$green-550",
-  "background-warning-prominent": "$yellow-500",
-  "background-warning-subtle": "$yellow-100",
-  "border-danger": "$red-550",
-  "border-danger-active": "$red-650",
-  "border-danger-hover": "$red-600",
-  "border-focus-error-inner": "$white",
-  "border-focus-error-middle": "$red-400",
-  "border-focus-error-outer": "$red-200",
-  "border-focus-inner": "$white",
-  "border-focus-middle": "$blue-400",
-  "border-focus-outer": "$blue-200",
-  "border-focus-success-inner": "$white",
-  "border-focus-success-middle": "$green-400",
-  "border-focus-success-outer": "$green-200",
-  "border-neutrals": "$gray-250",
-  "border-neutrals-active": "$gray-350",
-  "border-neutrals-controls": "$gray-200",
-  "border-neutrals-controls-disabled": "$gray-150",
-  "border-neutrals-disabled": "$gray-150",
-  "border-neutrals-hover": "$gray-300",
+  "background-neutrals-control": "$gray300",
+  "background-neutrals-control-hover": "$gray350",
+  "background-neutrals-control-pressed": "$gray400",
+  "background-neutrals-disabled": "$alphaBlack100",
+  "background-neutrals-hover": "$gray100",
+  "background-neutrals-inverted": "$gray950",
+  "background-neutrals-inverted-subtle": "$gray800",
+  "background-neutrals-pressed": "$gray150",
+  "background-neutrals-subtle": "$gray100",
+  "background-neutrals-subtle-hover": "$gray150",
+  "background-neutrals-subtle-pressed": "$gray200",
+  "background-neutrals-transparent": "$transparent",
+  "background-primary-prominent": "$blue500",
+  "background-primary-prominent-hover": "$blue550",
+  "background-primary-prominent-pressed": "$blue600",
+  "background-primary-prominent-selected": "$blue500",
+  "background-primary-subtle": "$blue100",
+  "background-primary-subtle-hover": "$blue150",
+  "background-primary-subtle-pressed": "$blue200",
+  "background-primary-subtle-selected": "$blue200",
+  "background-success-prominent": "$green500",
+  "background-success-prominent-hover": "$green550",
+  "background-success-prominent-pressed": "$green600",
+  "background-success-subtle": "$green50",
+  "background-warning-prominent": "$yellow500",
+  "background-warning-subtle": "$yellow50",
+  "border-danger": "$red500",
+  "border-danger-hover": "$red550",
+  "border-danger-pressed": "$red600",
+  "focus-keyboard": "#2B4DF8",
+  "border-neutrals": "$gray200",
+  "border-neutrals-disabled": "$alphaGray50",
+  "border-neutrals-hover": "$gray300",
   "border-neutrals-inverted": "$white",
-  "border-neutrals-subtle": "$gray-150",
-  "border-neutrals-text": "$gray-900",
-  "border-neutrals-text-active": "$gray-950",
-  "border-neutrals-text-hover": "$gray-950",
-  "border-neutrals-text-subtle": "$gray-500",
-  "border-neutrals-text-subtle-active": "$gray-600",
-  "border-neutrals-text-subtle-hover": "$gray-550",
+  "border-neutrals-pressed": "$gray350",
+  "border-neutrals-subtle": "$gray100",
+  "border-neutrals-subtle-hover": "$gray200",
+  "border-neutrals-subtle-pressed": "$gray250",
   "border-neutrals-transparent": "$transparent",
-  "border-primary": "$blue-500",
-  "border-primary-active": "$blue-600",
-  "border-primary-hover": "$blue-550",
-  "border-primary-inverted": "$blue-100",
-  "border-success": "$green-550",
-  "border-success-active": "$green-650",
-  "border-success-hover": "$green-600",
-  "border-warning": "$yellow-500",
-  "icon-danger": "$red-550",
-  "icon-danger-active": "$red-650",
-  "icon-danger-hover": "$red-600",
-  "icon-danger-inverted": "$white",
-  "icon-neutrals": "$gray-900",
-  "icon-neutrals-disabled": "$gray-350",
-  "icon-neutrals-inactive": "$gray-450",
-  "icon-neutrals-inactive-hover": "$gray-500",
-  "icon-neutrals-inverted": "$gray-50",
-  "icon-neutrals-search": "$gray-500",
-  "icon-neutrals-subtle": "$gray-500",
-  "icon-neutrals-text": "$gray-700",
-  "icon-primary": "$blue-500",
-  "icon-primary-active": "$blue-600",
-  "icon-primary-hover": "$blue-550",
-  "icon-primary-inverted": "$white",
-  "icon-primary-selected": "$blue-500",
-  "icon-success": "$green-550",
-  "icon-success-active": "$green-650",
-  "icon-success-hover": "$green-600",
-  "icon-success-inverted": "$green-200",
-  "icon-warning": "$yellow-700",
-  "icon-warning-prominent": "$yellow-700",
-  "icon-warning-subtle": "$yellow-600",
-  "text-danger": "$red-550",
-  "text-danger-active": "$red-650",
-  "text-danger-hover": "$red-600",
-  "text-danger-inverted": "$white",
-  "text-neutrals": "$gray-900",
-  "text-neutrals-active": "$gray-950",
-  "text-neutrals-disabled": "$gray-350",
-  "text-neutrals-hover": "$gray-950",
-  "text-neutrals-inverted": "$gray-50",
-  "text-neutrals-placeholder": "$gray-500",
-  "text-neutrals-placeholder-only": "$gray-500",
-  "text-neutrals-subtle": "$gray-500",
-  "text-neutrals-subtle-active": "$gray-600",
-  "text-neutrals-subtle-hover": "$gray-550",
-  "text-primary": "$blue-500",
-  "text-primary-active": "$blue-600",
-  "text-primary-hover": "$blue-550",
-  "text-primary-inverted": "$white",
-  "text-primary-inverted-subtle": "$blue-300",
-  "text-primary-selected": "$blue-500",
-  "text-success": "$green-550",
-  "text-success-active": "$green-650",
-  "text-success-hover": "$green-600",
-  "text-success-inverted": "$green-200",
-  "text-warning": "$yellow-700",
-  "text-warning-subtle": "$yellow-600"
+  "border-primary": "$blue500",
+  "border-primary-hover": "$blue550",
+  "border-primary-inverted": "$blue50",
+  "border-primary-pressed": "$blue600",
+  "border-primary-selected": "$blue500",
+  "border-success": "$green500",
+  "border-success-hover": "$green550",
+  "border-success-pressed": "$green600",
+  "border-warning": "$yellow500",
+  "icon-danger": "$red500",
+  "icon-danger-hover": "$red550",
+  "icon-danger-inverted": "$red50",
+  "icon-danger-pressed": "$red600",
+  "icon-neutrals": "$gray900",
+  "icon-neutrals-disabled": "$alphaGray600",
+  "icon-neutrals-hover": "$gray950",
+  "icon-neutrals-inverted": "$white",
+  "icon-neutrals-inverted-hover": "$gray50",
+  "icon-neutrals-inverted-subtle": "$alphaWhite700",
+  "icon-neutrals-inverted-subtle-hover": "$alphaWhite600",
+  "icon-neutrals-placeholder": "$gray500",
+  "icon-neutrals-pressed": "$gray950",
+  "icon-neutrals-subtle": "$gray600",
+  "icon-neutrals-subtle-hover": "$gray650",
+  "icon-neutrals-subtle-pressed": "$gray700",
+  "icon-primary": "$blue500",
+  "icon-primary-hover": "$blue550",
+  "icon-primary-inverted": "$blue50",
+  "icon-primary-inverted-hover": "$blue100",
+  "icon-primary-pressed": "$blue600",
+  "icon-primary-selected": "$blue500",
+  "icon-success": "$green600",
+  "icon-success-hover": "$green650",
+  "icon-success-inverted": "$green50",
+  "icon-success-pressed": "$green700",
+  "icon-warning": "$yellow800",
+  "text-danger": "$red500",
+  "text-danger-hover": "$red550",
+  "text-danger-inverted": "$red50",
+  "text-danger-pressed": "$red600",
+  "text-neutrals": "$gray900",
+  "text-neutrals-disabled": "$alphaGray300",
+  "text-neutrals-hover": "$gray950",
+  "text-neutrals-inverted": "$white",
+  "text-neutrals-inverted-hover": "$gray50",
+  "text-neutrals-inverted-subtle": "$alphaWhite700",
+  "text-neutrals-inverted-subtle-hover": "$alphaWhite600",
+  "text-neutrals-placeholder": "$gray500",
+  "text-neutrals-pressed": "$gray950",
+  "text-neutrals-subtle": "$gray600",
+  "text-neutrals-subtle-hover": "$gray650",
+  "text-neutrals-subtle-pressed": "$gray700",
+  "text-primary": "$blue500",
+  "text-primary-hover": "$blue550",
+  "text-primary-inverted": "$blue50",
+  "text-primary-inverted-subtle": "$blue100",
+  "text-primary-pressed": "$blue600",
+  "text-primary-selected": "$blue500",
+  "text-success": "$green600",
+  "text-success-hover": "$green650",
+  "text-success-inverted": "$green50",
+  "text-success-pressed": "$green700",
+  "text-warning": "$yellow800"
 };
 
-const focusShadows = {
+const colors = {
+  "background-alpha": "$alphaBlack100",
+  "background-alpha-subtle": "$alphaBlack50",
+  "background-neutrals-overlay": "$alphaBlack300",
+  "background-neutrals-overlay-subtle": "$alphaBlack200",
+  "background-danger-prominent": "$red500",
+  "background-danger-prominent-hover": "$red450",
+  "background-danger-prominent-pressed": "$red400",
+  "background-danger-subtle": "$red600",
+  "background-danger-subtle-hover": "$red550",
+  "background-danger-subtle-pressed": "$red500",
+  "background-neutrals": "$gray950",
+  "background-neutrals-control": "$gray700",
+  "background-neutrals-control-hover": "$gray650",
+  "background-neutrals-control-pressed": "$gray600",
+  "background-neutrals-disabled": "$alphaWhite100",
+  "background-neutrals-hover": "$gray900",
+  "background-neutrals-inverted": "$white",
+  "background-neutrals-inverted-subtle": "$gray150",
+  "background-neutrals-pressed": "$gray850",
+  "background-neutrals-subtle": "$gray750",
+  "background-neutrals-subtle-hover": "$gray700",
+  "background-neutrals-subtle-pressed": "$gray650",
+  "background-neutrals-transparent": "$transparent",
+  "background-primary-prominent": "$blue400",
+  "background-primary-prominent-hover": "$blue350",
+  "background-primary-prominent-pressed": "$blue300",
+  "background-primary-prominent-selected": "$blue400",
+  "background-primary-subtle": "$blue700",
+  "background-primary-subtle-hover": "$blue650",
+  "background-primary-subtle-pressed": "$blue600",
+  "background-primary-subtle-selected": "$blue700",
+  "background-success-prominent": "$green500",
+  "background-success-prominent-hover": "$green450",
+  "background-success-prominent-pressed": "$green400",
+  "background-success-subtle": "$green600",
+  "background-warning-prominent": "$yellow500",
+  "background-warning-subtle": "$yellow50",
+  "border-danger": "$red500",
+  "border-danger-hover": "$red450",
+  "border-danger-pressed": "$red400",
+  "focus-keyboard": "#2B4DF8",
+  "border-neutrals": "$gray550",
+  "border-neutrals-disabled": "$alphaGray50",
+  "border-neutrals-hover": "$gray400",
+  "border-neutrals-inverted": "$gray950",
+  "border-neutrals-pressed": "$gray350",
+  "border-neutrals-subtle": "$gray800",
+  "border-neutrals-subtle-hover": "$gray700",
+  "border-neutrals-subtle-pressed": "$gray650",
+  "border-neutrals-transparent": "$transparent",
+  "border-primary": "$blue400",
+  "border-primary-hover": "$blue350",
+  "border-primary-inverted": "$blue900",
+  "border-primary-pressed": "$blue300",
+  "border-primary-selected": "$blue400",
+  "border-success": "$green500",
+  "border-success-hover": "$green450",
+  "border-success-pressed": "$green400",
+  "border-warning": "$yellow500",
+  "icon-danger": "$red400",
+  "icon-danger-hover": "$red350",
+  "icon-danger-inverted": "$red900",
+  "icon-danger-pressed": "$red300",
+  "icon-neutrals": "$gray50",
+  "icon-neutrals-disabled": "$alphaBlack300",
+  "icon-neutrals-hover": "$gray100",
+  "icon-neutrals-inverted": "$gray950",
+  "icon-neutrals-inverted-hover": "$gray900",
+  "icon-neutrals-inverted-subtle": "$alphaBlack700",
+  "icon-neutrals-inverted-subtle-hover": "$alphaBlack800",
+  "icon-neutrals-placeholder": "$gray300",
+  "icon-neutrals-pressed": "$gray150",
+  "icon-neutrals-subtle": "$gray300",
+  "icon-neutrals-subtle-hover": "$gray250",
+  "icon-neutrals-subtle-pressed": "$gray200",
+  "icon-primary": "$blue400",
+  "icon-primary-hover": "$blue350",
+  "icon-primary-inverted": "$blue900",
+  "icon-primary-inverted-hover": "$gray850",
+  "icon-primary-pressed": "$blue300",
+  "icon-primary-selected": "$blue400",
+  "icon-success": "$green400",
+  "icon-success-hover": "$green350",
+  "icon-success-inverted": "$green900",
+  "icon-success-pressed": "$green300",
+  "icon-warning": "$yellow200",
+  "text-danger": "$red500",
+  "text-danger-hover": "$red450",
+  "text-danger-inverted": "$red900",
+  "text-danger-pressed": "$red400",
+  "text-neutrals": "$gray50",
+  "text-neutrals-disabled": "$alphaBlack300",
+  "text-neutrals-hover": "$gray100",
+  "text-neutrals-inverted": "$gray900",
+  "text-neutrals-inverted-hover": "$gray850",
+  "text-neutrals-inverted-subtle": "$alphaBlack700",
+  "text-neutrals-inverted-subtle-hover": "$alphaBlack800",
+  "text-neutrals-placeholder": "$gray300",
+  "text-neutrals-pressed": "$gray150",
+  "text-neutrals-subtle": "$gray300",
+  "text-neutrals-subtle-hover": "$gray250",
+  "text-neutrals-subtle-pressed": "$gray200",
+  "text-primary": "$blue400",
+  "text-primary-hover": "$blue350",
+  "text-primary-inverted": "$blue900",
+  "text-primary-inverted-subtle": "$blue850",
+  "text-primary-pressed": "$blue300",
+  "text-primary-selected": "$blue400",
+  "text-success": "$green400",
+  "text-success-hover": "$green350",
+  "text-success-inverted": "$green900",
+  "text-success-pressed": "$green300",
+  "text-warning": "$yellow200"
+};
+
+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"
+  }
+};
+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",
@@ -139,150 +253,9 @@ "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",
 
-const shadows$1 = Object.freeze({
-  50: "0 4px 16px #05003812",
-  100: "0 8px 32px #05003808",
-  ...focusShadows
-});
-
 const light = Object.freeze({
   colors: colors$1,
-  shadows: shadows$1
+  shadows: { ...shadows.light, ...focus }
 });
-
-const colors = {
-  "background-alpha-active": "#FFFFFF4D",
-  "background-alpha-hover": "#FFFFFF33",
-  "background-danger-prominent": "$red-500",
-  "background-danger-prominent-active": "$red-400",
-  "background-danger-prominent-hover": "$red-450",
-  "background-danger-subtle": "$red-800",
-  "background-danger-subtle-active": "$red-700",
-  "background-danger-subtle-hover": "$red-750",
-  "background-neutrals": "$gray-950",
-  "background-neutrals-active": "$gray-700",
-  "background-neutrals-container": "$gray-850",
-  "background-neutrals-controls-disabled": "$gray-700",
-  "background-neutrals-disabled": "$gray-700",
-  "background-neutrals-hover": "$gray-800",
-  "background-neutrals-inactive": "$gray-500",
-  "background-neutrals-inactive-hover": "$gray-600",
-  "background-neutrals-inverted": "$white",
-  "background-neutrals-inverted-subtle": "$gray-100",
-  "background-neutrals-page": "$gray-850",
-  "background-neutrals-page-subtle": "$gray-800",
-  "background-neutrals-scrollbar": "$gray-700",
-  "background-neutrals-scrollbar-active": "$gray-600",
-  "background-neutrals-scrollbar-hover": "$gray-650",
-  "background-neutrals-subtle": "$gray-750",
-  "background-neutrals-subtle-active": "$gray-650",
-  "background-neutrals-subtle-hover": "$gray-700",
-  "background-primary-prominent": "$blue-500",
-  "background-primary-prominent-active": "$blue-600",
-  "background-primary-prominent-hover": "$blue-550",
-  "background-primary-prominent-selected": "$blue-500",
-  "background-primary-subtle": "$blue-800",
-  "background-primary-subtle-active": "$blue-700",
-  "background-primary-subtle-hover": "$blue-750",
-  "background-primary-subtle-selected": "$blue-700",
-  "background-success": "$green-800",
-  "background-success-prominent": "$green-500",
-  "background-success-prominent-active": "$green-400",
-  "background-success-prominent-hover": "$green-450",
-  "background-warning-prominent": "$yellow-400",
-  "background-warning-subtle": "$yellow-900",
-  "border-danger": "$red-300",
-  "border-danger-active": "$red-200",
-  "border-danger-hover": "$red-250",
-  "border-focus-error-inner": "$gray-950",
-  "border-focus-error-middle": "$red-350",
-  "border-focus-error-outer": "$red-550",
-  "border-focus-inner": "$gray-950",
-  "border-focus-middle": "$blue-350",
-  "border-focus-outer": "$blue-550",
-  "border-focus-success-inner": "$gray-950",
-  "border-focus-success-middle": "$green-350",
-  "border-focus-success-outer": "$green-550",
-  "border-neutrals": "$gray-550",
-  "border-neutrals-active": "$gray-450",
-  "border-neutrals-controls": "$gray-600",
-  "border-neutrals-controls-disabled": "$gray-800",
-  "border-neutrals-disabled": "$gray-800",
-  "border-neutrals-hover": "$gray-500",
-  "border-neutrals-inverted": "$gray-950",
-  "border-neutrals-subtle": "$gray-800",
-  "border-neutrals-text": "$gray-100",
-  "border-neutrals-text-active": "$gray-50",
-  "border-neutrals-text-hover": "$gray-50",
-  "border-neutrals-text-subtle": "$gray-300",
-  "border-neutrals-text-subtle-active": "$gray-100",
-  "border-neutrals-text-subtle-hover": "$gray-200",
-  "border-neutrals-transparent": "$transparent",
-  "border-primary": "$blue-300",
-  "border-primary-active": "$blue-200",
-  "border-primary-hover": "$blue-250",
-  "border-primary-inverted": "$blue-900",
-  "border-success": "$green-300",
-  "border-success-active": "$green-200",
-  "border-success-hover": "$green-250",
-  "border-warning": "$yellow-700",
-  "icon-danger": "$red-200",
-  "icon-danger-active": "$red-100",
-  "icon-danger-hover": "$red-150",
-  "icon-danger-inverted": "$white",
-  "icon-neutrals": "$gray-100",
-  "icon-neutrals-disabled": "$gray-600",
-  "icon-neutrals-inactive": "$gray-400",
-  "icon-neutrals-inactive-hover": "$gray-300",
-  "icon-neutrals-inverted": "$gray-900",
-  "icon-neutrals-search": "$gray-400",
-  "icon-neutrals-subtle": "$gray-200",
-  "icon-neutrals-text": "$gray-300",
-  "icon-primary": "$blue-300",
-  "icon-primary-active": "$blue-200",
-  "icon-primary-hover": "$blue-250",
-  "icon-primary-inverted": "$white",
-  "icon-primary-selected": "$blue-200",
-  "icon-success": "$green-200",
-  "icon-success-active": "$green-100",
-  "icon-success-hover": "$green-150",
-  "icon-success-inverted": "$green-800",
-  "icon-warning": "$yellow-200",
-  "icon-warning-prominent": "$yellow-200",
-  "icon-warning-subtle": "$yellow-300",
-  "text-danger": "$red-200",
-  "text-danger-active": "$red-100",
-  "text-danger-hover": "$red-150",
-  "text-danger-inverted": "$white",
-  "text-neutrals": "$gray-100",
-  "text-neutrals-active": "$gray-50",
-  "text-neutrals-disabled": "$gray-600",
-  "text-neutrals-hover": "$gray-50",
-  "text-neutrals-inverted": "$gray-950",
-  "text-neutrals-placeholder": "$gray-300",
-  "text-neutrals-placeholder-only": "$gray-300",
-  "text-neutrals-subtle": "$gray-300",
-  "text-neutrals-subtle-active": "$gray-100",
-  "text-neutrals-subtle-hover": "$gray-200",
-  "text-primary": "$blue-300",
-  "text-primary-active": "$blue-200",
-  "text-primary-hover": "$blue-250",
-  "text-primary-inverted": "$white",
-  "text-primary-inverted-subtle": "$blue-400",
-  "text-primary-selected": "$blue-300",
-  "text-success": "$green-200",
-  "text-success-active": "$green-100",
-  "text-success-hover": "$green-150",
-  "text-success-inverted": "$green-800",
-  "text-warning": "$yellow-200",
-  "text-warning-subtle": "$yellow-300"
-};
-
-const shadows = Object.freeze({
-  50: "0px 0px 8px 0px rgba(9,9,9,.65)",
-  100: "0px 0px 16px 0px rgba(9,9,9,.65)",
-  ...focusShadows
-});
-
 const dark = Object.freeze({
-  colors,
-  shadows
+  colors: colors,
+  shadows: { ...shadows.dark, ...focus }
 });
@@ -289,0 +262,0 @@

dist/types.d.ts

@@ -1,6 +0,9 @@
-import { tokens } from '@mirohq/design-tokens';
+import { Colors } from '@mirohq/design-tokens';
 
-declare type AliasColorsKeys = 'background-alpha-active' | 'background-alpha-hover' | 'background-danger-prominent' | 'background-danger-prominent-active' | 'background-danger-prominent-hover' | 'background-danger-subtle' | 'background-danger-subtle-active' | 'background-danger-subtle-hover' | 'background-neutrals' | 'background-neutrals-active' | 'background-neutrals-container' | 'background-neutrals-controls-disabled' | 'background-neutrals-disabled' | 'background-neutrals-hover' | 'background-neutrals-inactive' | 'background-neutrals-inactive-hover' | 'background-neutrals-inverted' | 'background-neutrals-inverted-subtle' | 'background-neutrals-page' | 'background-neutrals-page-subtle' | 'background-neutrals-scrollbar' | 'background-neutrals-scrollbar-active' | 'background-neutrals-scrollbar-hover' | 'background-neutrals-subtle' | 'background-neutrals-subtle-active' | 'background-neutrals-subtle-hover' | 'background-primary-prominent' | 'background-primary-prominent-active' | 'background-primary-prominent-hover' | 'background-primary-prominent-selected' | 'background-primary-subtle' | 'background-primary-subtle-active' | 'background-primary-subtle-hover' | 'background-primary-subtle-selected' | 'background-success' | 'background-success-prominent' | 'background-success-prominent-active' | 'background-success-prominent-hover' | 'background-warning-prominent' | 'background-warning-subtle' | 'border-danger' | 'border-danger-active' | 'border-danger-hover' | 'border-focus-error-inner' | 'border-focus-error-middle' | 'border-focus-error-outer' | 'border-focus-inner' | 'border-focus-middle' | 'border-focus-outer' | 'border-focus-success-inner' | 'border-focus-success-middle' | 'border-focus-success-outer' | 'border-neutrals' | 'border-neutrals-active' | 'border-neutrals-controls' | 'border-neutrals-controls-disabled' | 'border-neutrals-disabled' | 'border-neutrals-hover' | 'border-neutrals-inverted' | 'border-neutrals-subtle' | 'border-neutrals-text' | 'border-neutrals-text-active' | 'border-neutrals-text-hover' | 'border-neutrals-text-subtle' | 'border-neutrals-text-subtle-active' | 'border-neutrals-text-subtle-hover' | 'border-neutrals-transparent' | 'border-primary' | 'border-primary-active' | 'border-primary-hover' | 'border-primary-inverted' | 'border-success' | 'border-success-active' | 'border-success-hover' | 'border-warning' | 'icon-danger' | 'icon-danger-active' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-neutrals' | 'icon-neutrals-disabled' | 'icon-neutrals-inactive' | 'icon-neutrals-inactive-hover' | 'icon-neutrals-inverted' | 'icon-neutrals-search' | 'icon-neutrals-subtle' | 'icon-neutrals-text' | 'icon-primary' | 'icon-primary-active' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-selected' | 'icon-success' | 'icon-success-active' | 'icon-success-hover' | 'icon-success-inverted' | 'icon-warning' | 'icon-warning-prominent' | 'icon-warning-subtle' | 'text-danger' | 'text-danger-active' | 'text-danger-hover' | 'text-danger-inverted' | 'text-neutrals' | 'text-neutrals-active' | 'text-neutrals-disabled' | 'text-neutrals-hover' | 'text-neutrals-inverted' | 'text-neutrals-placeholder' | 'text-neutrals-placeholder-only' | 'text-neutrals-subtle' | 'text-neutrals-subtle-active' | 'text-neutrals-subtle-hover' | 'text-primary' | 'text-primary-active' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-selected' | 'text-success' | 'text-success-active' | 'text-success-hover' | 'text-success-inverted' | 'text-warning' | 'text-warning-subtle';
+/**
+ * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
+ */
+declare type AliasColors = 'background-alpha' | 'background-alpha-subtle' | 'background-neutrals-overlay' | 'background-neutrals-overlay-subtle' | 'background-danger-prominent' | 'background-danger-prominent-hover' | 'background-danger-prominent-pressed' | 'background-danger-subtle' | 'background-danger-subtle-hover' | 'background-danger-subtle-pressed' | 'background-neutrals' | 'background-neutrals-control' | 'background-neutrals-control-hover' | 'background-neutrals-control-pressed' | 'background-neutrals-disabled' | 'background-neutrals-hover' | 'background-neutrals-inverted' | 'background-neutrals-inverted-subtle' | 'background-neutrals-pressed' | 'background-neutrals-subtle' | 'background-neutrals-subtle-hover' | 'background-neutrals-subtle-pressed' | 'background-neutrals-transparent' | 'background-primary-prominent' | 'background-primary-prominent-hover' | 'background-primary-prominent-pressed' | 'background-primary-prominent-selected' | 'background-primary-subtle' | 'background-primary-subtle-hover' | 'background-primary-subtle-pressed' | 'background-primary-subtle-selected' | 'background-success-prominent' | 'background-success-prominent-hover' | 'background-success-prominent-pressed' | 'background-success-subtle' | 'background-warning-prominent' | 'background-warning-subtle' | 'border-danger' | 'border-danger-hover' | 'border-danger-pressed' | 'focus-keyboard' | 'border-neutrals' | 'border-neutrals-disabled' | 'border-neutrals-hover' | 'border-neutrals-inverted' | 'border-neutrals-pressed' | 'border-neutrals-subtle' | 'border-neutrals-subtle-hover' | 'border-neutrals-subtle-pressed' | 'border-neutrals-transparent' | 'border-primary' | 'border-primary-hover' | 'border-primary-inverted' | 'border-primary-pressed' | 'border-primary-selected' | 'border-success' | 'border-success-hover' | 'border-success-pressed' | 'border-warning' | 'icon-danger' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-danger-pressed' | 'icon-neutrals' | 'icon-neutrals-disabled' | 'icon-neutrals-hover' | 'icon-neutrals-inverted' | 'icon-neutrals-inverted-hover' | 'icon-neutrals-inverted-subtle' | 'icon-neutrals-inverted-subtle-hover' | 'icon-neutrals-placeholder' | 'icon-neutrals-pressed' | 'icon-neutrals-subtle' | 'icon-neutrals-subtle-hover' | 'icon-neutrals-subtle-pressed' | 'icon-primary' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-inverted-hover' | 'icon-primary-pressed' | 'icon-primary-selected' | 'icon-success' | 'icon-success-hover' | 'icon-success-inverted' | 'icon-success-pressed' | 'icon-warning' | 'text-danger' | 'text-danger-hover' | 'text-danger-inverted' | 'text-danger-pressed' | 'text-neutrals' | 'text-neutrals-disabled' | 'text-neutrals-hover' | 'text-neutrals-inverted' | 'text-neutrals-inverted-hover' | 'text-neutrals-inverted-subtle' | 'text-neutrals-inverted-subtle-hover' | 'text-neutrals-placeholder' | 'text-neutrals-pressed' | 'text-neutrals-subtle' | 'text-neutrals-subtle-hover' | 'text-neutrals-subtle-pressed' | 'text-primary' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-pressed' | 'text-primary-selected' | 'text-success' | 'text-success-hover' | 'text-success-inverted' | 'text-success-pressed' | 'text-warning';
 
-declare const focusShadows: {
+declare const focus: {
     'focus-small': string;
@@ -14,19 +17,15 @@ 'focus-small-outline': string;
 };
+declare type AliasShadows = 50 | 100 | keyof typeof focus;
 
-declare type AliasShadowKeys = 50 | 100 | keyof typeof focusShadows;
-
-declare type GlobalAliasOrRawColor = `$${tokens.Colors}` | `$${AliasColorsKeys}` | (string & {});
-declare type AliasColors = {
-    [Key in AliasColorsKeys]?: GlobalAliasOrRawColor;
-};
-declare type AliasShadows = {
-    [Key in AliasShadowKeys]?: string;
-};
+declare type Color = `$${Colors}` | `$${AliasColors}` | (string & {});
 declare type Theme = {
-    colors: Partial<AliasColors>;
-    shadows: Partial<AliasShadows>;
+    colors?: {
+        [Key in AliasColors]?: Color;
+    };
+    shadows?: {
+        [Key in AliasShadows]?: string;
+    };
 };
 
 declare const light: Theme;
-
 declare const dark: Theme;
@@ -36,2 +35,2 @@
 
-export { AliasColors, AliasColorsKeys, AliasShadowKeys, AliasShadows, GlobalAliasOrRawColor, Theme, base, dark, light };
+export { AliasColors, AliasShadows, Color, Theme, base, dark, light };

package.json

 {
   "name": "@mirohq/design-system-themes",
-  "version": "0.7.2",
+  "version": "0.7.3-style-dictionary.0",
   "description": "",
@@ -17,11 +17,11 @@ "author": "Miro",
     },
-    "./base-theme.css": "./base-theme.css",
-    "./light-theme.css": "./light-theme.css",
-    "./dark-theme.css": "./dark-theme.css"
+    "./base.css": "./base.css",
+    "./light.css": "./light.css",
+    "./dark.css": "./dark.css"
   },
   "files": [
     "dist",
-    "base-theme.css",
-    "light-theme.css",
-    "dark-theme.css"
+    "base.css",
+    "light.css",
+    "dark.css"
   ],
@@ -32,12 +32,10 @@ "publishConfig": {
   "dependencies": {
-    "@mirohq/design-tokens": "^5.1.2"
+    "@mirohq/design-tokens": "^6.0.0-style-dictionary.0"
   },
   "devDependencies": {
-    "@types/lodash.kebabcase": "^4.1.7",
-    "lodash.kebabcase": "^4.1.1",
-    "mds-tokens-generator": "^1.0.1"
+    "@mirohq/design-tokens-dictionary": "^0.0.0"
   },
   "scripts": {
-    "build": "rollup -c ../../../rollup.config.js && node scripts/build.mjs",
-    "clean": "rm -rf dist && rm -f base-theme.css && rm -f light-theme.css && rm -f dark-theme.css",
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf dist",
     "prebuild": "pnpm clean",
@@ -44,0 +42,0 @@ "sync:tokens": "node scripts/generate.mjs"

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Dev dependency count

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

66194

decreased by-33.52%

Number of package files

6

decreased by-33.33%

Lines of code

563

decreased by-46.94%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@mirohq/design-tokens@6.5.0(transitive)

• - Removed@mirohq/design-tokens@5.1.2(transitive)

• Updated@mirohq/design-tokens@^6.0.0-style-dictionary.0