@shopify/polaris-tokens - npm Package Compare versions

Comparing version 0.0.0-snapshot-20240730162901 to 0.0.0-snapshot-20240918203244

dist/cjs/src/colors.js

@@ -58,18 +58,18 @@ 'use strict';
 var green = {
-  '1': 'rgba(250, 255, 251, 1)',
-  '2': 'rgba(230, 254, 234, 1)',
-  '3': 'rgba(205, 254, 212, 1)',
-  '4': 'rgba(175, 254, 191, 1)',
-  '5': 'rgba(146, 252, 172, 1)',
-  '6': 'rgba(110, 247, 153, 1)',
-  '7': 'rgba(82, 244, 144, 1)',
-  '8': 'rgba(44, 237, 131, 1)',
-  '9': 'rgba(17, 223, 123, 1)',
-  '10': 'rgba(24, 191, 121, 1)',
-  '11': 'rgba(13, 156, 106, 1)',
-  '12': 'rgba(4, 123, 93, 1)',
-  '13': 'rgba(3, 94, 76, 1)',
-  '14': 'rgba(1, 75, 64, 1)',
-  '15': 'rgba(7, 54, 48, 1)',
-  '16': 'rgba(2, 38, 34, 1)'
+  '1': 'rgba(248, 255, 251, 1)',
+  '2': 'rgba(227, 255, 237, 1)',
+  '3': 'rgba(205, 254, 225, 1)',
+  '4': 'rgba(180, 254, 210, 1)',
+  '5': 'rgba(146, 254, 194, 1)',
+  '6': 'rgba(99, 253, 176, 1)',
+  '7': 'rgba(56, 250, 163, 1)',
+  '8': 'rgba(53, 238, 155, 1)',
+  '9': 'rgba(50, 225, 147, 1)',
+  '10': 'rgba(46, 211, 137, 1)',
+  '11': 'rgba(50, 160, 110, 1)',
+  '12': 'rgba(41, 132, 90, 1)',
+  '13': 'rgba(19, 111, 69, 1)',
+  '14': 'rgba(12, 81, 50, 1)',
+  '15': 'rgba(8, 61, 37, 1)',
+  '16': 'rgba(9, 42, 27, 1)'
 };
@@ -149,18 +149,18 @@ var lime = {
 var red = {
-  '1': 'rgba(255, 250, 251, 1)',
-  '2': 'rgba(255, 246, 248, 1)',
-  '3': 'rgba(255, 236, 239, 1)',
-  '4': 'rgba(254, 232, 235, 1)',
-  '5': 'rgba(254, 225, 230, 1)',
-  '6': 'rgba(254, 217, 223, 1)',
-  '7': 'rgba(254, 209, 215, 1)',
-  '8': 'rgba(254, 193, 199, 1)',
-  '9': 'rgba(253, 172, 177, 1)',
-  '10': 'rgba(247, 128, 134, 1)',
-  '11': 'rgba(226, 44, 56, 1)',
-  '12': 'rgba(199, 10, 36, 1)',
-  '13': 'rgba(163, 10, 36, 1)',
-  '14': 'rgba(142, 11, 33, 1)',
-  '15': 'rgba(95, 7, 22, 1)',
-  '16': 'rgba(47, 4, 11, 1)'
+  '1': 'rgba(255, 251, 251, 1)',
+  '2': 'rgba(255, 246, 246, 1)',
+  '3': 'rgba(255, 237, 236, 1)',
+  '4': 'rgba(254, 233, 232, 1)',
+  '5': 'rgba(254, 226, 225, 1)',
+  '6': 'rgba(254, 218, 217, 1)',
+  '7': 'rgba(254, 211, 209, 1)',
+  '8': 'rgba(254, 195, 193, 1)',
+  '9': 'rgba(253, 176, 172, 1)',
+  '10': 'rgba(253, 129, 122, 1)',
+  '11': 'rgba(239, 77, 47, 1)',
+  '12': 'rgba(229, 28, 0, 1)',
+  '13': 'rgba(181, 38, 11, 1)',
+  '14': 'rgba(142, 31, 11, 1)',
+  '15': 'rgba(95, 21, 7, 1)',
+  '16': 'rgba(47, 10, 4, 1)'
 };
@@ -240,6 +240,6 @@ var rose = {
 var whiteAlpha = {
-  1: 'rgba(255, 255, 255, 0.01)',
-  2: 'rgba(255, 255, 255, 0.02)',
-  3: 'rgba(255, 255, 255, 0.03)',
-  4: 'rgba(255, 255, 255, 0.04)',
+  1: 'rgba(255, 255, 255, 0)',
+  2: 'rgba(255, 255, 255, 0.01)',
+  3: 'rgba(255, 255, 255, 0.02)',
+  4: 'rgba(255, 255, 255, 0.03)',
   5: 'rgba(255, 255, 255, 0.05)',
@@ -249,10 +249,10 @@ 6: 'rgba(255, 255, 255, 0.06)',
   8: 'rgba(255, 255, 255, 0.11)',
-  9: 'rgba(255, 255, 255, 0.14)',
-  10: 'rgba(255, 255, 255, 0.17)',
-  11: 'rgba(255, 255, 255, 0.22)',
-  12: 'rgba(255, 255, 255, 0.29)',
-  13: 'rgba(255, 255, 255, 0.44)',
-  14: 'rgba(255, 255, 255, 0.6)',
-  15: 'rgba(255, 255, 255, 0.7)',
-  16: 'rgba(255, 255, 255, 0.8)'
+  9: 'rgba(255, 255, 255, 0.17)',
+  10: 'rgba(255, 255, 255, 0.20)',
+  11: 'rgba(255, 255, 255, 0.28)',
+  12: 'rgba(255, 255, 255, 0.46)',
+  13: 'rgba(255, 255, 255, 0.62)',
+  14: 'rgba(255, 255, 255, 0.71)',
+  15: 'rgba(255, 255, 255, 0.81)',
+  16: 'rgba(255, 255, 255, 0.90)'
 };
@@ -259,0 +259,0 @@

dist/cjs/src/themes/base/color.js

@@ -205,6 +205,2 @@ 'use strict';
   },
-  'color-bg-fill-secondary-selected': {
-    value: colors.gray[8],
-    description: 'The selected state (on press) color of elements with a smaller surface area and a secondary level of prominence.'
-  },
   'color-bg-fill-tertiary': {
@@ -678,10 +674,22 @@ value: colors.gray[8],
   },
-  'color-tooltip-tail-down-border': {
+  'color-tooltip-tail-down-border-experimental': {
     value: colors.gray[9],
     description: 'The border color for tooltip tails pointing down.'
   },
-  'color-tooltip-tail-up-border': {
+  'color-tooltip-tail-up-border-experimental': {
     value: colors.gray[8],
     description: 'The border color for tooltip tails pointing up.'
   },
+  'color-border-gradient-experimental': {
+    value: "linear-gradient(to bottom, " + colors.gray[7] + ", " + colors.gray[10] + " 78%, " + colors.gray[11] + ")"
+  },
+  'color-border-gradient-hover-experimental': {
+    value: "linear-gradient(to bottom, " + colors.gray[7] + ", " + colors.gray[10] + " 78%, " + colors.gray[11] + ")"
+  },
+  'color-border-gradient-selected-experimental': {
+    value: "linear-gradient(to bottom, " + colors.gray[7] + ", " + colors.gray[10] + " 78%, " + colors.gray[11] + ")"
+  },
+  'color-border-gradient-active-experimental': {
+    value: "linear-gradient(to bottom, " + colors.gray[7] + ", " + colors.gray[10] + " 78%, " + colors.gray[11] + ")"
+  },
   'color-icon': {
@@ -869,5 +877,2 @@ value: colors.gray[14],
     value: colors.gray[12]
-  },
-  'color-scrollbar-thumb-bg': {
-    value: colors.gray[11]
   }
@@ -874,0 +879,0 @@ };

dist/cjs/src/themes/dark.js

@@ -24,7 +24,4 @@ 'use strict';
     'color-icon-secondary': {
-      value: colors.gray[11]
+      value: colors.gray[12]
     },
-    'color-icon-disabled': {
-      value: colors.gray[14]
-    },
     'color-text': {
@@ -36,10 +33,7 @@ value: colors.gray[8]
     },
-    'color-text-disabled': {
-      value: colors.gray[14]
-    },
     'color-bg-surface-secondary-active': {
-      value: colors.whiteAlpha[9]
+      value: colors.gray[13]
     },
     'color-bg-surface-secondary-hover': {
-      value: colors.whiteAlpha[6]
+      value: colors.gray[14]
     },
@@ -59,3 +53,3 @@ 'color-bg-fill-transparent': {
     'color-bg-fill-hover': {
-      value: colors.whiteAlpha[5]
+      value: colors.gray[14]
     },
@@ -92,11 +86,2 @@ 'color-bg-fill-transparent-hover': {
     },
-    'color-bg-fill-secondary': {
-      value: colors.whiteAlpha[7]
-    },
-    'color-bg-fill-secondary-hover': {
-      value: colors.whiteAlpha[8]
-    },
-    'color-bg-fill-secondary-selected': {
-      value: colors.whiteAlpha[10]
-    },
     'color-bg-surface-brand-selected': {
@@ -106,27 +91,21 @@ value: colors.gray[14]
     'color-border-secondary': {
-      value: colors.gray[14]
+      value: colors.gray[13]
     },
-    'color-bg-surface-tertiary': {
-      value: colors.whiteAlpha[7]
+    'color-tooltip-tail-down-border-experimental': {
+      value: 'rgba(60, 60, 60, 1)'
     },
-    'color-icon-brand': {
-      value: colors.gray[14]
+    'color-tooltip-tail-up-border-experimental': {
+      value: 'rgba(71, 71, 71, 1)'
     },
-    'color-bg-fill-disabled': {
-      value: colors.whiteAlpha[5]
+    'color-border-gradient-experimental': {
+      value: "linear-gradient(to bottom, " + colors.whiteAlpha[9] + ", " + colors.whiteAlpha[4] + ")"
     },
-    'color-text-brand-on-bg-fill-disabled': {
-      value: colors.gray[12]
+    'color-border-gradient-hover-experimental': {
+      value: "linear-gradient(to bottom, " + colors.whiteAlpha[9] + ", " + colors.whiteAlpha[4] + ")"
     },
-    'color-bg-fill-brand-disabled': {
-      value: colors.whiteAlpha[11]
+    'color-border-gradient-selected-experimental': {
+      value: "linear-gradient(to bottom, " + colors.blackAlpha[10] + ", " + colors.whiteAlpha[10] + ")"
     },
-    'color-bg-fill-tertiary': {
-      value: colors.gray[15]
-    },
-    'color-tooltip-tail-down-border': {
-      value: 'rgba(60, 60, 60, 1)'
-    },
-    'color-tooltip-tail-up-border': {
-      value: 'rgba(71, 71, 71, 1)'
+    'color-border-gradient-active-experimental': {
+      value: "linear-gradient(to bottom, " + colors.whiteAlpha[10] + ", " + colors.whiteAlpha[4] + ")"
     }
@@ -133,0 +112,0 @@ },

dist/types/src/themes/base/color.d.ts

 import type { MetaTokenProperties } from '../types';
-export type ColorBackgroundAlias = 'bg-fill-active' | 'bg-fill-brand-active' | 'bg-fill-brand-disabled' | 'bg-fill-brand-hover' | 'bg-fill-brand-selected' | 'bg-fill-brand' | 'bg-fill-caution-active' | 'bg-fill-caution-hover' | 'bg-fill-caution-secondary' | 'bg-fill-caution' | 'bg-fill-critical-active' | 'bg-fill-critical-hover' | 'bg-fill-critical-secondary' | 'bg-fill-critical-selected' | 'bg-fill-critical' | 'bg-fill-disabled' | 'bg-fill-emphasis-active' | 'bg-fill-emphasis-hover' | 'bg-fill-emphasis' | 'bg-fill-hover' | 'bg-fill-info-active' | 'bg-fill-info-hover' | 'bg-fill-info-secondary' | 'bg-fill-info' | 'bg-fill-inverse-active' | 'bg-fill-inverse-hover' | 'bg-fill-inverse' | 'bg-fill-magic-secondary-active' | 'bg-fill-magic-secondary-hover' | 'bg-fill-magic-secondary' | 'bg-fill-magic' | 'bg-fill-secondary-active' | 'bg-fill-secondary-selected' | 'bg-fill-secondary-hover' | 'bg-fill-secondary' | 'bg-fill-selected' | 'bg-fill-success-active' | 'bg-fill-success-hover' | 'bg-fill-success-secondary' | 'bg-fill-success' | 'bg-fill-tertiary-active' | 'bg-fill-tertiary-hover' | 'bg-fill-tertiary' | 'bg-fill-transparent-active' | 'bg-fill-transparent-hover' | 'bg-fill-transparent-secondary-active' | 'bg-fill-transparent-secondary-hover' | 'bg-fill-transparent-secondary' | 'bg-fill-transparent-selected' | 'bg-fill-transparent' | 'bg-fill-warning-active' | 'bg-fill-warning-hover' | 'bg-fill-warning-secondary' | 'bg-fill-warning' | 'bg-fill' | 'bg-inverse' | 'bg-surface-active' | 'bg-surface-brand-active' | 'bg-surface-brand-hover' | 'bg-surface-brand-selected' | 'bg-surface-brand' | 'bg-surface-caution-active' | 'bg-surface-caution-hover' | 'bg-surface-caution' | 'bg-surface-critical-active' | 'bg-surface-critical-hover' | 'bg-surface-critical' | 'bg-surface-disabled' | 'bg-surface-emphasis-active' | 'bg-surface-emphasis-hover' | 'bg-surface-emphasis' | 'bg-surface-hover' | 'bg-surface-info-active' | 'bg-surface-info-hover' | 'bg-surface-info' | 'bg-surface-inverse' | 'bg-surface-magic-active' | 'bg-surface-magic-hover' | 'bg-surface-magic' | 'bg-surface-secondary-active' | 'bg-surface-secondary-hover' | 'bg-surface-secondary-selected' | 'bg-surface-secondary' | 'bg-surface-selected' | 'bg-surface-success-active' | 'bg-surface-success-hover' | 'bg-surface-success' | 'bg-surface-tertiary-active' | 'bg-surface-tertiary-hover' | 'bg-surface-tertiary' | 'bg-surface-transparent' | 'bg-surface-warning-active' | 'bg-surface-warning-hover' | 'bg-surface-warning' | 'bg-surface' | 'bg'
+export type ColorBackgroundAlias = 'bg-fill-active' | 'bg-fill-brand-active' | 'bg-fill-brand-disabled' | 'bg-fill-brand-hover' | 'bg-fill-brand-selected' | 'bg-fill-brand' | 'bg-fill-caution-active' | 'bg-fill-caution-hover' | 'bg-fill-caution-secondary' | 'bg-fill-caution' | 'bg-fill-critical-active' | 'bg-fill-critical-hover' | 'bg-fill-critical-secondary' | 'bg-fill-critical-selected' | 'bg-fill-critical' | 'bg-fill-disabled' | 'bg-fill-emphasis-active' | 'bg-fill-emphasis-hover' | 'bg-fill-emphasis' | 'bg-fill-hover' | 'bg-fill-info-active' | 'bg-fill-info-hover' | 'bg-fill-info-secondary' | 'bg-fill-info' | 'bg-fill-inverse-active' | 'bg-fill-inverse-hover' | 'bg-fill-inverse' | 'bg-fill-magic-secondary-active' | 'bg-fill-magic-secondary-hover' | 'bg-fill-magic-secondary' | 'bg-fill-magic' | 'bg-fill-secondary-active' | 'bg-fill-secondary-hover' | 'bg-fill-secondary' | 'bg-fill-selected' | 'bg-fill-success-active' | 'bg-fill-success-hover' | 'bg-fill-success-secondary' | 'bg-fill-success' | 'bg-fill-tertiary-active' | 'bg-fill-tertiary-hover' | 'bg-fill-tertiary' | 'bg-fill-transparent-active' | 'bg-fill-transparent-hover' | 'bg-fill-transparent-secondary-active' | 'bg-fill-transparent-secondary-hover' | 'bg-fill-transparent-secondary' | 'bg-fill-transparent-selected' | 'bg-fill-transparent' | 'bg-fill-warning-active' | 'bg-fill-warning-hover' | 'bg-fill-warning-secondary' | 'bg-fill-warning' | 'bg-fill' | 'bg-inverse' | 'bg-surface-active' | 'bg-surface-brand-active' | 'bg-surface-brand-hover' | 'bg-surface-brand-selected' | 'bg-surface-brand' | 'bg-surface-caution-active' | 'bg-surface-caution-hover' | 'bg-surface-caution' | 'bg-surface-critical-active' | 'bg-surface-critical-hover' | 'bg-surface-critical' | 'bg-surface-disabled' | 'bg-surface-emphasis-active' | 'bg-surface-emphasis-hover' | 'bg-surface-emphasis' | 'bg-surface-hover' | 'bg-surface-info-active' | 'bg-surface-info-hover' | 'bg-surface-info' | 'bg-surface-inverse' | 'bg-surface-magic-active' | 'bg-surface-magic-hover' | 'bg-surface-magic' | 'bg-surface-secondary-active' | 'bg-surface-secondary-hover' | 'bg-surface-secondary-selected' | 'bg-surface-secondary' | 'bg-surface-selected' | 'bg-surface-success-active' | 'bg-surface-success-hover' | 'bg-surface-success' | 'bg-surface-tertiary-active' | 'bg-surface-tertiary-hover' | 'bg-surface-tertiary' | 'bg-surface-transparent' | 'bg-surface-warning-active' | 'bg-surface-warning-hover' | 'bg-surface-warning' | 'bg-surface' | 'bg'
 /** Specialty and component background colors. */
- | 'avatar-bg-fill' | 'avatar-five-bg-fill' | 'avatar-four-bg-fill' | 'avatar-one-bg-fill' | 'avatar-seven-bg-fill' | 'avatar-six-bg-fill' | 'avatar-three-bg-fill' | 'avatar-two-bg-fill' | 'backdrop-bg' | 'button-gradient-bg-fill' | 'checkbox-bg-surface-disabled' | 'input-bg-surface-active' | 'input-bg-surface-hover' | 'input-bg-surface' | 'nav-bg-surface-active' | 'nav-bg-surface-hover' | 'nav-bg-surface-selected' | 'nav-bg-surface' | 'nav-bg' | 'radio-button-bg-surface-disabled' | 'video-thumbnail-play-button-bg-fill-hover' | 'video-thumbnail-play-button-bg-fill' | 'scrollbar-thumb-bg-hover' | 'scrollbar-thumb-bg';
-export type ColorBorderAlias = 'border-brand' | 'border-caution' | 'border-critical-secondary' | 'border-critical' | 'border-disabled' | 'border-emphasis-active' | 'border-emphasis-hover' | 'border-emphasis' | 'border-focus' | 'border-hover' | 'border-info' | 'border-inverse-active' | 'border-inverse-hover' | 'border-inverse' | 'border-magic-secondary' | 'border-magic-secondary-hover' | 'border-magic' | 'border-secondary' | 'border-success' | 'border-tertiary' | 'border-warning' | 'border'
+ | 'avatar-bg-fill' | 'avatar-five-bg-fill' | 'avatar-four-bg-fill' | 'avatar-one-bg-fill' | 'avatar-seven-bg-fill' | 'avatar-six-bg-fill' | 'avatar-three-bg-fill' | 'avatar-two-bg-fill' | 'backdrop-bg' | 'button-gradient-bg-fill' | 'checkbox-bg-surface-disabled' | 'input-bg-surface-active' | 'input-bg-surface-hover' | 'input-bg-surface' | 'nav-bg-surface-active' | 'nav-bg-surface-hover' | 'nav-bg-surface-selected' | 'nav-bg-surface' | 'nav-bg' | 'radio-button-bg-surface-disabled' | 'video-thumbnail-play-button-bg-fill-hover' | 'video-thumbnail-play-button-bg-fill' | 'scrollbar-thumb-bg-hover';
+export type ColorBorderAlias = 'border-brand' | 'border-caution' | 'border-critical-secondary' | 'border-critical' | 'border-disabled' | 'border-emphasis-active' | 'border-emphasis-hover' | 'border-emphasis' | 'border-focus' | 'border-hover' | 'border-info' | 'border-inverse-active' | 'border-inverse-hover' | 'border-inverse' | 'border-magic-secondary' | 'border-magic-secondary-hover' | 'border-magic' | 'border-secondary' | 'border-success' | 'border-tertiary' | 'border-warning' | 'border' | 'border-gradient-experimental' | 'border-gradient-hover-experimental' | 'border-gradient-selected-experimental' | 'border-gradient-active-experimental'
 /** Specialty and component border colors. */
- | 'input-border-active' | 'input-border-hover' | 'input-border' | 'tooltip-tail-down-border' | 'tooltip-tail-up-border';
+ | 'input-border-active' | 'input-border-hover' | 'input-border' | 'tooltip-tail-down-border-experimental' | 'tooltip-tail-up-border-experimental';
 export type ColorIconAlias = 'icon-active' | 'icon-brand' | 'icon-caution' | 'icon-critical' | 'icon-disabled' | 'icon-emphasis-active' | 'icon-emphasis-hover' | 'icon-emphasis' | 'icon-hover' | 'icon-info' | 'icon-inverse' | 'icon-magic' | 'icon-secondary-active' | 'icon-secondary-hover' | 'icon-secondary' | 'icon-success' | 'icon-warning' | 'icon'
@@ -9,0 +9,0 @@ /** Specialty and component icon colors. */

dist/types/src/themes/base/index.d.ts

@@ -60,3 +60,2 @@ export declare const metaThemeBase: {
         "color-bg-fill-secondary-active": import("../types").MetaTokenProperties;
-        "color-bg-fill-secondary-selected": import("../types").MetaTokenProperties;
         "color-bg-fill-secondary-hover": import("../types").MetaTokenProperties;
@@ -148,3 +147,2 @@ "color-bg-fill-secondary": import("../types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("../types").MetaTokenProperties;
-        "color-scrollbar-thumb-bg": import("../types").MetaTokenProperties;
         "color-border": import("../types").MetaTokenProperties;
@@ -172,7 +170,11 @@ "color-border-brand": import("../types").MetaTokenProperties;
         "color-border-warning": import("../types").MetaTokenProperties;
+        "color-border-gradient-experimental": import("../types").MetaTokenProperties;
+        "color-border-gradient-hover-experimental": import("../types").MetaTokenProperties;
+        "color-border-gradient-selected-experimental": import("../types").MetaTokenProperties;
+        "color-border-gradient-active-experimental": import("../types").MetaTokenProperties;
         "color-input-border-active": import("../types").MetaTokenProperties;
         "color-input-border-hover": import("../types").MetaTokenProperties;
         "color-input-border": import("../types").MetaTokenProperties;
-        "color-tooltip-tail-down-border": import("../types").MetaTokenProperties;
-        "color-tooltip-tail-up-border": import("../types").MetaTokenProperties;
+        "color-tooltip-tail-down-border-experimental": import("../types").MetaTokenProperties;
+        "color-tooltip-tail-up-border-experimental": import("../types").MetaTokenProperties;
         "color-icon-active": import("../types").MetaTokenProperties;
@@ -316,2 +318,3 @@ "color-icon-brand": import("../types").MetaTokenProperties;
         "motion-duration-200": import("../types").MetaTokenProperties;
+        "motion-duration-50": import("../types").MetaTokenProperties;
         "motion-duration-100": import("../types").MetaTokenProperties;
@@ -324,3 +327,2 @@ "motion-duration-150": import("../types").MetaTokenProperties;
         "motion-duration-450": import("../types").MetaTokenProperties;
-        "motion-duration-50": import("../types").MetaTokenProperties;
         "motion-duration-5000": import("../types").MetaTokenProperties;
@@ -327,0 +329,0 @@ "motion-keyframes-bounce": import("../types").MetaTokenProperties;

dist/types/src/themes/dark.d.ts

@@ -21,5 +21,2 @@ export declare const metaThemeDarkPartial: {
         };
-        'color-icon-disabled': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
-        };
         'color-text': {
@@ -31,10 +28,7 @@ value: `rgba(${number}, ${number}, ${number}, 1)`;
         };
-        'color-text-disabled': {
+        'color-bg-surface-secondary-active': {
             value: `rgba(${number}, ${number}, ${number}, 1)`;
         };
-        'color-bg-surface-secondary-active': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
-        };
         'color-bg-surface-secondary-hover': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
+            value: `rgba(${number}, ${number}, ${number}, 1)`;
         };
@@ -54,3 +48,3 @@ 'color-bg-fill-transparent': {
         'color-bg-fill-hover': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
+            value: `rgba(${number}, ${number}, ${number}, 1)`;
         };
@@ -87,11 +81,2 @@ 'color-bg-fill-transparent-hover': {
         };
-        'color-bg-fill-secondary': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
-        };
-        'color-bg-fill-secondary-hover': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
-        };
-        'color-bg-fill-secondary-selected': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
-        };
         'color-bg-surface-brand-selected': {
@@ -103,24 +88,18 @@ value: `rgba(${number}, ${number}, ${number}, 1)`;
         };
-        'color-bg-surface-tertiary': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
+        'color-tooltip-tail-down-border-experimental': {
+            value: string;
         };
-        'color-icon-brand': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
+        'color-tooltip-tail-up-border-experimental': {
+            value: string;
         };
-        'color-bg-fill-disabled': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
+        'color-border-gradient-experimental': {
+            value: string;
         };
-        'color-text-brand-on-bg-fill-disabled': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
+        'color-border-gradient-hover-experimental': {
+            value: string;
         };
-        'color-bg-fill-brand-disabled': {
-            value: `rgba(${number}, ${number}, ${number}, ${number})`;
-        };
-        'color-bg-fill-tertiary': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
-        };
-        'color-tooltip-tail-down-border': {
+        'color-border-gradient-selected-experimental': {
             value: string;
         };
-        'color-tooltip-tail-up-border': {
+        'color-border-gradient-active-experimental': {
             value: string;
@@ -194,3 +173,2 @@ };
         "color-bg-fill-secondary-active": import("./types").MetaTokenProperties;
-        "color-bg-fill-secondary-selected": import("./types").MetaTokenProperties;
         "color-bg-fill-secondary-hover": import("./types").MetaTokenProperties;
@@ -282,3 +260,2 @@ "color-bg-fill-secondary": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
-        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -306,7 +283,11 @@ "color-border-brand": import("./types").MetaTokenProperties;
         "color-border-warning": import("./types").MetaTokenProperties;
+        "color-border-gradient-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-hover-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-selected-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-active-experimental": import("./types").MetaTokenProperties;
         "color-input-border-active": import("./types").MetaTokenProperties;
         "color-input-border-hover": import("./types").MetaTokenProperties;
         "color-input-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-down-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-up-border": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-down-border-experimental": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-up-border-experimental": import("./types").MetaTokenProperties;
         "color-icon-active": import("./types").MetaTokenProperties;
@@ -450,2 +431,3 @@ "color-icon-brand": import("./types").MetaTokenProperties;
         "motion-duration-200": import("./types").MetaTokenProperties;
+        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-100": import("./types").MetaTokenProperties;
@@ -458,3 +440,2 @@ "motion-duration-150": import("./types").MetaTokenProperties;
         "motion-duration-450": import("./types").MetaTokenProperties;
-        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-5000": import("./types").MetaTokenProperties;
@@ -461,0 +442,0 @@ "motion-keyframes-bounce": import("./types").MetaTokenProperties;

dist/types/src/themes/index.d.ts

@@ -65,3 +65,2 @@ import type { MetaThemePartials, MetaThemes } from './types';
         "color-bg-fill-secondary-active": import("./types").MetaTokenProperties;
-        "color-bg-fill-secondary-selected": import("./types").MetaTokenProperties;
         "color-bg-fill-secondary-hover": import("./types").MetaTokenProperties;
@@ -153,3 +152,2 @@ "color-bg-fill-secondary": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
-        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -177,7 +175,11 @@ "color-border-brand": import("./types").MetaTokenProperties;
         "color-border-warning": import("./types").MetaTokenProperties;
+        "color-border-gradient-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-hover-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-selected-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-active-experimental": import("./types").MetaTokenProperties;
         "color-input-border-active": import("./types").MetaTokenProperties;
         "color-input-border-hover": import("./types").MetaTokenProperties;
         "color-input-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-down-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-up-border": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-down-border-experimental": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-up-border-experimental": import("./types").MetaTokenProperties;
         "color-icon-active": import("./types").MetaTokenProperties;
@@ -321,2 +323,3 @@ "color-icon-brand": import("./types").MetaTokenProperties;
         "motion-duration-200": import("./types").MetaTokenProperties;
+        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-100": import("./types").MetaTokenProperties;
@@ -329,3 +332,2 @@ "motion-duration-150": import("./types").MetaTokenProperties;
         "motion-duration-450": import("./types").MetaTokenProperties;
-        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-5000": import("./types").MetaTokenProperties;
@@ -332,0 +334,0 @@ "motion-keyframes-bounce": import("./types").MetaTokenProperties;

dist/types/src/themes/light-high-contrast.d.ts

@@ -93,3 +93,2 @@ export declare const metaThemeLightHighContrastPartial: {
         "color-bg-fill-secondary-active": import("./types").MetaTokenProperties;
-        "color-bg-fill-secondary-selected": import("./types").MetaTokenProperties;
         "color-bg-fill-secondary-hover": import("./types").MetaTokenProperties;
@@ -181,3 +180,2 @@ "color-bg-fill-secondary": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
-        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -205,7 +203,11 @@ "color-border-brand": import("./types").MetaTokenProperties;
         "color-border-warning": import("./types").MetaTokenProperties;
+        "color-border-gradient-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-hover-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-selected-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-active-experimental": import("./types").MetaTokenProperties;
         "color-input-border-active": import("./types").MetaTokenProperties;
         "color-input-border-hover": import("./types").MetaTokenProperties;
         "color-input-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-down-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-up-border": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-down-border-experimental": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-up-border-experimental": import("./types").MetaTokenProperties;
         "color-icon-active": import("./types").MetaTokenProperties;
@@ -349,2 +351,3 @@ "color-icon-brand": import("./types").MetaTokenProperties;
         "motion-duration-200": import("./types").MetaTokenProperties;
+        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-100": import("./types").MetaTokenProperties;
@@ -357,3 +360,2 @@ "motion-duration-150": import("./types").MetaTokenProperties;
         "motion-duration-450": import("./types").MetaTokenProperties;
-        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-5000": import("./types").MetaTokenProperties;
@@ -360,0 +362,0 @@ "motion-keyframes-bounce": import("./types").MetaTokenProperties;

dist/types/src/themes/light-mobile.d.ts

@@ -160,3 +160,2 @@ export declare const metaThemeLightMobilePartial: {
         "color-bg-fill-secondary-active": import("./types").MetaTokenProperties;
-        "color-bg-fill-secondary-selected": import("./types").MetaTokenProperties;
         "color-bg-fill-secondary-hover": import("./types").MetaTokenProperties;
@@ -248,3 +247,2 @@ "color-bg-fill-secondary": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
-        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -272,7 +270,11 @@ "color-border-brand": import("./types").MetaTokenProperties;
         "color-border-warning": import("./types").MetaTokenProperties;
+        "color-border-gradient-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-hover-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-selected-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-active-experimental": import("./types").MetaTokenProperties;
         "color-input-border-active": import("./types").MetaTokenProperties;
         "color-input-border-hover": import("./types").MetaTokenProperties;
         "color-input-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-down-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-up-border": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-down-border-experimental": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-up-border-experimental": import("./types").MetaTokenProperties;
         "color-icon-active": import("./types").MetaTokenProperties;
@@ -416,2 +418,3 @@ "color-icon-brand": import("./types").MetaTokenProperties;
         "motion-duration-200": import("./types").MetaTokenProperties;
+        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-100": import("./types").MetaTokenProperties;
@@ -424,3 +427,2 @@ "motion-duration-150": import("./types").MetaTokenProperties;
         "motion-duration-450": import("./types").MetaTokenProperties;
-        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-5000": import("./types").MetaTokenProperties;
@@ -427,0 +429,0 @@ "motion-keyframes-bounce": import("./types").MetaTokenProperties;

dist/types/src/themes/light.d.ts

@@ -61,3 +61,2 @@ export declare const metaThemeLightPartial: {};
         "color-bg-fill-secondary-active": import("./types").MetaTokenProperties;
-        "color-bg-fill-secondary-selected": import("./types").MetaTokenProperties;
         "color-bg-fill-secondary-hover": import("./types").MetaTokenProperties;
@@ -149,3 +148,2 @@ "color-bg-fill-secondary": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
-        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -173,7 +171,11 @@ "color-border-brand": import("./types").MetaTokenProperties;
         "color-border-warning": import("./types").MetaTokenProperties;
+        "color-border-gradient-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-hover-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-selected-experimental": import("./types").MetaTokenProperties;
+        "color-border-gradient-active-experimental": import("./types").MetaTokenProperties;
         "color-input-border-active": import("./types").MetaTokenProperties;
         "color-input-border-hover": import("./types").MetaTokenProperties;
         "color-input-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-down-border": import("./types").MetaTokenProperties;
-        "color-tooltip-tail-up-border": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-down-border-experimental": import("./types").MetaTokenProperties;
+        "color-tooltip-tail-up-border-experimental": import("./types").MetaTokenProperties;
         "color-icon-active": import("./types").MetaTokenProperties;
@@ -317,2 +319,3 @@ "color-icon-brand": import("./types").MetaTokenProperties;
         "motion-duration-200": import("./types").MetaTokenProperties;
+        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-100": import("./types").MetaTokenProperties;
@@ -325,3 +328,2 @@ "motion-duration-150": import("./types").MetaTokenProperties;
         "motion-duration-450": import("./types").MetaTokenProperties;
-        "motion-duration-50": import("./types").MetaTokenProperties;
         "motion-duration-5000": import("./types").MetaTokenProperties;
@@ -328,0 +330,0 @@ "motion-keyframes-bounce": import("./types").MetaTokenProperties;

package.json

 {
   "name": "@shopify/polaris-tokens",
-  "version": "0.0.0-snapshot-20240730162901",
+  "version": "0.0.0-snapshot-20240918203244",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/cjs/build/index.js",

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

900568

increased by0.91%

Worsened metrics

Lines of code

14974

decreased by-0.11%

No dependency changes