@shopify/polaris-tokens - npm Package Compare versions

Comparing version 9.0.1 to 9.1.0

dist/cjs/src/colors.js

@@ -238,6 +238,6 @@ 'use strict';
 var whiteAlpha = {
-  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)',
+  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)',
   5: 'rgba(255, 255, 255, 0.05)',
@@ -247,10 +247,10 @@ 6: 'rgba(255, 255, 255, 0.06)',
   8: 'rgba(255, 255, 255, 0.11)',
-  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)'
+  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)'
 };
@@ -257,0 +257,0 @@

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

@@ -819,2 +819,8 @@ 'use strict';
   },
+  'color-button-gradient-bg-fill-selected-experimental': {
+    value: 'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)'
+  },
+  'color-button-gradient-bg-fill-active-experimental': {
+    value: 'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)'
+  },
   'color-checkbox-bg-surface-disabled': {
@@ -876,2 +882,5 @@ value: colors.blackAlpha[7]
     value: colors.gray[12]
+  },
+  'color-scrollbar-thumb-bg': {
+    value: colors.gray[11]
   }
@@ -878,0 +887,0 @@ };

dist/cjs/src/themes/dark.js

@@ -33,6 +33,6 @@ 'use strict';
     'color-bg-surface-secondary-active': {
-      value: colors.gray[13]
+      value: colors.whiteAlpha[9]
     },
     'color-bg-surface-secondary-hover': {
-      value: colors.gray[14]
+      value: colors.whiteAlpha[6]
     },
@@ -52,3 +52,3 @@ 'color-bg-fill-transparent': {
     'color-bg-fill-hover': {
-      value: colors.gray[14]
+      value: 'rgba(37, 37, 37, 1)'
     },
@@ -85,2 +85,5 @@ 'color-bg-fill-transparent-hover': {
     },
+    'color-bg-fill-secondary-hover': {
+      value: colors.whiteAlpha[8]
+    },
     'color-bg-surface-brand-selected': {
@@ -90,3 +93,3 @@ value: colors.gray[14]
     'color-border-secondary': {
-      value: colors.gray[13]
+      value: colors.gray[14]
     },
@@ -100,12 +103,18 @@ 'color-tooltip-tail-down-border-experimental': {
     'color-border-gradient-experimental': {
-      value: "linear-gradient(to bottom, " + colors.whiteAlpha[9] + ", " + colors.whiteAlpha[4] + ")"
+      value: "linear-gradient(to bottom, " + colors.whiteAlpha[10] + ", " + colors.whiteAlpha[4] + ")"
     },
     'color-border-gradient-hover-experimental': {
-      value: "linear-gradient(to bottom, " + colors.whiteAlpha[9] + ", " + colors.whiteAlpha[4] + ")"
+      value: "linear-gradient(to bottom, " + colors.whiteAlpha[10] + ", " + colors.whiteAlpha[4] + ")"
     },
     'color-border-gradient-selected-experimental': {
-      value: "linear-gradient(to bottom, " + colors.blackAlpha[10] + ", " + colors.whiteAlpha[10] + ")"
+      value: "linear-gradient(to bottom, " + colors.blackAlpha[16] + ", " + colors.blackAlpha[11] + " 10%, " + colors.whiteAlpha[11] + ")"
     },
     'color-border-gradient-active-experimental': {
-      value: "linear-gradient(to bottom, " + colors.whiteAlpha[10] + ", " + colors.whiteAlpha[4] + ")"
+      value: "linear-gradient(to bottom, " + colors.blackAlpha[16] + ", " + colors.blackAlpha[11] + " 10%, " + colors.whiteAlpha[11] + ")"
+    },
+    'color-button-gradient-bg-fill-selected-experimental': {
+      value: "linear-gradient(to bottom, rgba(25, 25, 25, 1), rgba(19, 19, 19, 1) 50%, rgba(10, 10, 10, 1))"
+    },
+    'color-button-gradient-bg-fill-active-experimental': {
+      value: "linear-gradient(to bottom, rgba(33, 33, 33, 1), rgba(30, 30, 30, 1) 50%, rgba(18, 18, 18, 1))"
     }
@@ -112,0 +121,0 @@ },

dist/cjs/src/themes/utils.js

@@ -46,8 +46,2 @@ 'use strict';
 
-/**
- * Important: Do not export from Polaris tokens. This utility is exposed
- * in the `toValues` build step to ensure the `metaTheme` isn't in client bundles.
- */
-createIsTokenName(index.metaThemeBase);
-
 exports.createIsTokenName = createIsTokenName;
@@ -54,0 +48,0 @@ exports.createMetaTheme = createMetaTheme;

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-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';
+ | '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' | 'button-gradient-bg-fill-selected-experimental' | 'button-gradient-bg-fill-active-experimental' | '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' | 'border-gradient-experimental' | 'border-gradient-hover-experimental' | 'border-gradient-selected-experimental' | 'border-gradient-active-experimental'
@@ -6,0 +6,0 @@ /** Specialty and component border colors. */

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

@@ -133,2 +133,4 @@ export declare const metaThemeBase: {
         "color-button-gradient-bg-fill": import("../types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-selected-experimental": import("../types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-active-experimental": import("../types").MetaTokenProperties;
         "color-checkbox-bg-surface-disabled": import("../types").MetaTokenProperties;
@@ -147,2 +149,3 @@ "color-input-bg-surface-active": import("../types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("../types").MetaTokenProperties;
+        "color-scrollbar-thumb-bg": import("../types").MetaTokenProperties;
         "color-border": import("../types").MetaTokenProperties;
@@ -149,0 +152,0 @@ "color-border-brand": import("../types").MetaTokenProperties;

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

@@ -28,6 +28,6 @@ export declare const metaThemeDarkPartial: {
         'color-bg-surface-secondary-active': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
+            value: `rgba(${number}, ${number}, ${number}, ${number})`;
         };
         'color-bg-surface-secondary-hover': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
+            value: `rgba(${number}, ${number}, ${number}, ${number})`;
         };
@@ -47,3 +47,3 @@ 'color-bg-fill-transparent': {
         'color-bg-fill-hover': {
-            value: `rgba(${number}, ${number}, ${number}, 1)`;
+            value: string;
         };
@@ -80,2 +80,5 @@ 'color-bg-fill-transparent-hover': {
         };
+        'color-bg-fill-secondary-hover': {
+            value: `rgba(${number}, ${number}, ${number}, ${number})`;
+        };
         'color-bg-surface-brand-selected': {
@@ -105,2 +108,8 @@ value: `rgba(${number}, ${number}, ${number}, 1)`;
         };
+        'color-button-gradient-bg-fill-selected-experimental': {
+            value: string;
+        };
+        'color-button-gradient-bg-fill-active-experimental': {
+            value: string;
+        };
     };
@@ -245,2 +254,4 @@ shadow: {
         "color-button-gradient-bg-fill": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-selected-experimental": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-active-experimental": import("./types").MetaTokenProperties;
         "color-checkbox-bg-surface-disabled": import("./types").MetaTokenProperties;
@@ -259,2 +270,3 @@ "color-input-bg-surface-active": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
+        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -261,0 +273,0 @@ "color-border-brand": import("./types").MetaTokenProperties;

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

@@ -138,2 +138,4 @@ import type { MetaThemePartials, MetaThemes } from './types';
         "color-button-gradient-bg-fill": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-selected-experimental": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-active-experimental": import("./types").MetaTokenProperties;
         "color-checkbox-bg-surface-disabled": import("./types").MetaTokenProperties;
@@ -152,2 +154,3 @@ "color-input-bg-surface-active": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
+        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -154,0 +157,0 @@ "color-border-brand": import("./types").MetaTokenProperties;

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

@@ -166,2 +166,4 @@ export declare const metaThemeLightHighContrastPartial: {
         "color-button-gradient-bg-fill": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-selected-experimental": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-active-experimental": import("./types").MetaTokenProperties;
         "color-checkbox-bg-surface-disabled": import("./types").MetaTokenProperties;
@@ -180,2 +182,3 @@ "color-input-bg-surface-active": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
+        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -182,0 +185,0 @@ "color-border-brand": import("./types").MetaTokenProperties;

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

@@ -233,2 +233,4 @@ export declare const metaThemeLightMobilePartial: {
         "color-button-gradient-bg-fill": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-selected-experimental": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-active-experimental": import("./types").MetaTokenProperties;
         "color-checkbox-bg-surface-disabled": import("./types").MetaTokenProperties;
@@ -247,2 +249,3 @@ "color-input-bg-surface-active": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
+        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -249,0 +252,0 @@ "color-border-brand": import("./types").MetaTokenProperties;

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

@@ -134,2 +134,4 @@ export declare const metaThemeLightPartial: {};
         "color-button-gradient-bg-fill": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-selected-experimental": import("./types").MetaTokenProperties;
+        "color-button-gradient-bg-fill-active-experimental": import("./types").MetaTokenProperties;
         "color-checkbox-bg-surface-disabled": import("./types").MetaTokenProperties;
@@ -148,2 +150,3 @@ "color-input-bg-surface-active": import("./types").MetaTokenProperties;
         "color-scrollbar-thumb-bg-hover": import("./types").MetaTokenProperties;
+        "color-scrollbar-thumb-bg": import("./types").MetaTokenProperties;
         "color-border": import("./types").MetaTokenProperties;
@@ -150,0 +153,0 @@ "color-border-brand": import("./types").MetaTokenProperties;

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

@@ -31,7 +31,2 @@ import type { Exact } from '../types';
 export declare function createIsTokenName(theme: Theme | MetaTheme): (tokenName: unknown) => tokenName is TokenName;
-/**
- * Important: Do not export from Polaris tokens. This utility is exposed
- * in the `toValues` build step to ensure the `metaTheme` isn't in client bundles.
- */
-export declare const isTokenName: (tokenName: unknown) => tokenName is TokenName;
 //# sourceMappingURL=utils.d.ts.map

package.json

 {
   "name": "@shopify/polaris-tokens",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "",
@@ -8,2 +8,3 @@ "main": "dist/cjs/build/index.js",
   "types": "dist/types/build/index.d.ts",
+  "sideEffects": false,
   "engines": {
@@ -10,0 +11,0 @@ "node": ">=20.10.0"

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

911049

increased by1.09%

Lines of code

15078

increased by0.59%

No dependency changes