@instructure/ui-themes - npm Package Compare versions

Comparing version 10.5.0 to 10.5.1-pr-snapshot-1731420479891

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [10.5.1-pr-snapshot-1731420479891](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-pr-snapshot-1731420479891) (2024-11-12)
+
+**Note:** Version bump only for package @instructure/ui-themes
+
+
+
+
+
 # [10.5.0](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.5.0) (2024-11-07)
@@ -8,0 +16,0 @@

es/__new-tests__/themes.test.js

@@ -24,6 +24,21 @@ /*
  */
-import { canvas, canvasHighContrast } from '..';
+import { canvas, canvasHighContrast, canvasThemeLocal } from '..';
 import '@testing-library/jest-dom';
+import { ThemeRegistry } from '@instructure/theme-registry';
 const themes = [canvas, canvasHighContrast];
 describe('themes are backwards compatible', () => {
+  it('Local themes are not affected by ".use()"', async () => {
+    var _ThemeRegistry$getCur, _ThemeRegistry$getCur2, _ThemeRegistry$getCur3, _canvasThemeLocal$col, _canvasThemeLocal$col2;
+    canvas.use({
+      overrides: {
+        colors: {
+          primitives: {
+            white: 'blue'
+          }
+        }
+      }
+    });
+    expect((_ThemeRegistry$getCur = ThemeRegistry.getCurrentTheme()) === null || _ThemeRegistry$getCur === void 0 ? void 0 : (_ThemeRegistry$getCur2 = _ThemeRegistry$getCur.colors) === null || _ThemeRegistry$getCur2 === void 0 ? void 0 : (_ThemeRegistry$getCur3 = _ThemeRegistry$getCur2.primitives) === null || _ThemeRegistry$getCur3 === void 0 ? void 0 : _ThemeRegistry$getCur3.white).toEqual('blue');
+    expect(canvasThemeLocal === null || canvasThemeLocal === void 0 ? void 0 : (_canvasThemeLocal$col = canvasThemeLocal.colors) === null || _canvasThemeLocal$col === void 0 ? void 0 : (_canvasThemeLocal$col2 = _canvasThemeLocal$col.primitives) === null || _canvasThemeLocal$col2 === void 0 ? void 0 : _canvasThemeLocal$col2.white).toEqual('#FFFFFF');
+  });
   describe("should be able to access theme variables with 'theme.variables.x'", () => {
@@ -30,0 +45,0 @@ for (const theme of themes) {

es/index.js

@@ -25,7 +25,7 @@ /*
 
-import canvasHighContrast from './themes/canvasHighContrast';
-import canvas from './themes/canvas';
+import canvasHighContrast, { canvasHighContrastThemeLocal } from './themes/canvasHighContrast';
+import canvas, { canvasThemeLocal } from './themes/canvas';
 import { primitives, additionalPrimitives } from './sharedThemeTokens/colors/primitives';
 import dataVisualization from './sharedThemeTokens/colors/dataVisualization';
-export { canvas, canvasHighContrast, primitives, additionalPrimitives, dataVisualization };
+export { canvas, canvasThemeLocal, canvasHighContrast, canvasHighContrastThemeLocal, primitives, additionalPrimitives, dataVisualization };
 export default canvas;

es/themes/canvas/index.js

@@ -32,10 +32,17 @@ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
   /* Defaults for Canvas account branding variables: */
+  // used for border/background/shadow colors in many places
   'ic-brand-primary': colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
+  // used in lots of places for text color
   'ic-brand-font-color-dark': colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+  // used by Link and links in Billboard
   'ic-link-color': colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
   'ic-link-decoration': 'none',
+  // Used by BaseButton and its subcomponents
   'ic-brand-button--primary-bgd': colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
   'ic-brand-button--primary-text': colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
   'ic-brand-button--secondary-bgd': colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
+  // unused!
   'ic-brand-button--secondary-text': colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
+  // unused!
+  // these are used only by SideNavBar
   'ic-brand-global-nav-bgd': colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey100100,
@@ -48,2 +55,7 @@ 'ic-global-nav-link-hover': colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
 };
+/**
+ * Canvas theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ * Will be default in the next major version of InstUI
+ */
 const __theme = {
@@ -56,2 +68,3 @@ key,
 const theme = ThemeRegistry.registerTheme(__theme);
-export default theme;
+export default theme;
+export { __theme as canvasThemeLocal };

es/themes/canvasHighContrast/index.js

@@ -29,2 +29,8 @@ /*
 const key = 'canvas-high-contrast';
+/**
+ * Canvas high contrast theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ *
+ * Will be default in the next major version of InstUI
+ */
 const __theme = {
@@ -37,2 +43,4 @@ key,
 const theme = ThemeRegistry.registerTheme(__theme);
-export default theme;
+export default theme;
+// theme without the use() function and `variables` prop
+export { __theme as canvasHighContrastThemeLocal };

lib/__new-tests__/themes.test.js

@@ -5,2 +5,3 @@ "use strict";
 require("@testing-library/jest-dom");
+var _themeRegistry = require("@instructure/theme-registry");
 /*
@@ -32,2 +33,16 @@ * The MIT License (MIT)
 describe('themes are backwards compatible', () => {
+  it('Local themes are not affected by ".use()"', async () => {
+    var _ThemeRegistry$getCur, _ThemeRegistry$getCur2, _ThemeRegistry$getCur3, _canvasThemeLocal$col, _canvasThemeLocal$col2;
+    _.canvas.use({
+      overrides: {
+        colors: {
+          primitives: {
+            white: 'blue'
+          }
+        }
+      }
+    });
+    expect((_ThemeRegistry$getCur = _themeRegistry.ThemeRegistry.getCurrentTheme()) === null || _ThemeRegistry$getCur === void 0 ? void 0 : (_ThemeRegistry$getCur2 = _ThemeRegistry$getCur.colors) === null || _ThemeRegistry$getCur2 === void 0 ? void 0 : (_ThemeRegistry$getCur3 = _ThemeRegistry$getCur2.primitives) === null || _ThemeRegistry$getCur3 === void 0 ? void 0 : _ThemeRegistry$getCur3.white).toEqual('blue');
+    expect(_.canvasThemeLocal === null || _.canvasThemeLocal === void 0 ? void 0 : (_canvasThemeLocal$col = _.canvasThemeLocal.colors) === null || _canvasThemeLocal$col === void 0 ? void 0 : (_canvasThemeLocal$col2 = _canvasThemeLocal$col.primitives) === null || _canvasThemeLocal$col2 === void 0 ? void 0 : _canvasThemeLocal$col2.white).toEqual('#FFFFFF');
+  });
   describe("should be able to access theme variables with 'theme.variables.x'", () => {
@@ -34,0 +49,0 @@ for (const theme of themes) {

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -25,2 +26,14 @@ value: true
 });
+Object.defineProperty(exports, "canvasHighContrastThemeLocal", {
+  enumerable: true,
+  get: function () {
+    return _canvasHighContrast.canvasHighContrastThemeLocal;
+  }
+});
+Object.defineProperty(exports, "canvasThemeLocal", {
+  enumerable: true,
+  get: function () {
+    return _canvas.canvasThemeLocal;
+  }
+});
 Object.defineProperty(exports, "dataVisualization", {
@@ -39,4 +52,4 @@ enumerable: true,
 });
-var _canvasHighContrast = _interopRequireDefault(require("./themes/canvasHighContrast"));
-var _canvas = _interopRequireDefault(require("./themes/canvas"));
+var _canvasHighContrast = _interopRequireWildcard(require("./themes/canvasHighContrast"));
+var _canvas = _interopRequireWildcard(require("./themes/canvas"));
 var _primitives = require("./sharedThemeTokens/colors/primitives");
@@ -43,0 +56,0 @@ var _dataVisualization = _interopRequireDefault(require("./sharedThemeTokens/colors/dataVisualization"));

lib/themes/canvas/index.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.canvasThemeLocal = void 0;
 var _sharedThemeTokens = _interopRequireDefault(require("../../sharedThemeTokens"));
@@ -39,10 +39,17 @@ var _themeRegistry = require("@instructure/theme-registry");
   /* Defaults for Canvas account branding variables: */
+  // used for border/background/shadow colors in many places
   'ic-brand-primary': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts = _colors.colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
+  // used in lots of places for text color
   'ic-brand-font-color-dark': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts2 = _colors.colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+  // used by Link and links in Billboard
   'ic-link-color': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts3 = _colors.colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
   'ic-link-decoration': 'none',
+  // Used by BaseButton and its subcomponents
   'ic-brand-button--primary-bgd': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts4 = _colors.colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
   'ic-brand-button--primary-text': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts5 = _colors.colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
   'ic-brand-button--secondary-bgd': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts6 = _colors.colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
+  // unused!
   'ic-brand-button--secondary-text': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts7 = _colors.colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
+  // unused!
+  // these are used only by SideNavBar
   'ic-brand-global-nav-bgd': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts8 = _colors.colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey100100,
@@ -55,3 +62,8 @@ 'ic-global-nav-link-hover': _colors.colors === null || _colors.colors === void 0 ? void 0 : (_colors$contrasts9 = _colors.colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
 };
-const __theme = {
+/**
+ * Canvas theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ * Will be default in the next major version of InstUI
+ */
+const __theme = exports.canvasThemeLocal = {
   key,
@@ -58,0 +70,0 @@ ..._sharedThemeTokens.default,

lib/themes/canvasHighContrast/index.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.canvasHighContrastThemeLocal = void 0;
 var _sharedThemeTokens = _interopRequireDefault(require("../../sharedThemeTokens"));
@@ -37,3 +37,9 @@ var _themeRegistry = require("@instructure/theme-registry");
 const key = 'canvas-high-contrast';
-const __theme = {
+/**
+ * Canvas high contrast theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ *
+ * Will be default in the next major version of InstUI
+ */
+const __theme = exports.canvasHighContrastThemeLocal = {
   key,
@@ -45,2 +51,2 @@ description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
 const theme = _themeRegistry.ThemeRegistry.registerTheme(__theme);
-var _default = exports.default = theme;
+var _default = exports.default = theme; // theme without the use() function and `variables` prop

package.json

 {
   "name": "@instructure/ui-themes",
-  "version": "10.5.0",
+  "version": "10.5.1-pr-snapshot-1731420479891",
   "description": "A library of instructure themes",
@@ -25,3 +25,3 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.5.0",
+    "@instructure/ui-babel-preset": "10.5.1-pr-snapshot-1731420479891",
     "@testing-library/jest-dom": "^6.4.6",
@@ -32,4 +32,4 @@ "@testing-library/react": "^16.0.1",
   "dependencies": {
-    "@instructure/shared-types": "10.5.0",
-    "@instructure/theme-registry": "10.5.0"
+    "@instructure/shared-types": "10.5.1-pr-snapshot-1731420479891",
+    "@instructure/theme-registry": "10.5.1-pr-snapshot-1731420479891"
   },
@@ -36,0 +36,0 @@ "publishConfig": {

README.md

@@ -21,10 +21,2 @@ ---
 
-- global theming:
-
-  ```js
-  import canvas from '@instructure/ui-themes'
-
-  canvas.use()
-  ```
-
 - application level theming:
@@ -43,5 +35,13 @@
 
+- (DEPRECATED) global theming:
+
+  ```js
+  import canvas from '@instructure/ui-themes'
+
+  canvas.use()
+  ```
+
 ##### To override the theme variables:
 
-- globally:
+- (DEPRECATED) globally:
 
@@ -48,0 +48,0 @@ ```js

src/index.ts

@@ -35,4 +35,6 @@ /*
 
-import canvasHighContrast from './themes/canvasHighContrast'
-import canvas from './themes/canvas'
+import canvasHighContrast, {
+  canvasHighContrastThemeLocal
+} from './themes/canvasHighContrast'
+import canvas, { canvasThemeLocal } from './themes/canvas'
 
@@ -65,3 +67,5 @@ import {
   canvas,
+  canvasThemeLocal,
   canvasHighContrast,
+  canvasHighContrastThemeLocal,
   primitives,
@@ -68,0 +72,0 @@ additionalPrimitives,

src/themes/canvas/index.ts

@@ -34,13 +34,15 @@ /*
   /* Defaults for Canvas account branding variables: */
+  // used for border/background/shadow colors in many places
   'ic-brand-primary': colors?.contrasts?.blue4570,
+  // used in lots of places for text color
   'ic-brand-font-color-dark': colors?.contrasts?.grey125125,
-
+  // used by Link and links in Billboard
   'ic-link-color': colors?.contrasts?.blue4570,
   'ic-link-decoration': 'none',
-
+  // Used by BaseButton and its subcomponents
   'ic-brand-button--primary-bgd': colors?.contrasts?.blue4570,
   'ic-brand-button--primary-text': colors?.contrasts?.white1010,
-  'ic-brand-button--secondary-bgd': colors?.contrasts?.grey125125,
-  'ic-brand-button--secondary-text': colors?.contrasts?.white1010,
-
+  'ic-brand-button--secondary-bgd': colors?.contrasts?.grey125125, // unused!
+  'ic-brand-button--secondary-text': colors?.contrasts?.white1010, // unused!
+  // these are used only by SideNavBar
   'ic-brand-global-nav-bgd': colors?.contrasts?.grey100100,
@@ -61,2 +63,7 @@ 'ic-global-nav-link-hover': colors?.contrasts?.grey125125,
 
+/**
+ * Canvas theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ * Will be default in the next major version of InstUI
+ */
 const __theme: CanvasTheme = {
@@ -72,1 +79,2 @@ key,
 export default theme
+export { __theme as canvasThemeLocal }

src/themes/canvasHighContrast/index.ts

@@ -36,2 +36,8 @@ /*
 
+/**
+ * Canvas high contrast theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ *
+ * Will be default in the next major version of InstUI
+ */
 const __theme: CanvasHighContrastTheme = {
@@ -43,4 +49,6 @@ key,
 }
+
 const theme = ThemeRegistry.registerTheme(__theme)
-
 export default theme
+// theme without the use() function and `variables` prop
+export { __theme as canvasHighContrastThemeLocal }

types/index.d.ts

 import type { CanvasHighContrastTheme } from './themes/canvasHighContrast';
 import type { CanvasTheme, CanvasBrandVariables } from './themes/canvas';
 import type { BaseTheme, Primitives, AdditionalPrimitives, DataVisualization, UI } from '@instructure/shared-types';
-import canvasHighContrast from './themes/canvasHighContrast';
-import canvas from './themes/canvas';
+import canvasHighContrast, { canvasHighContrastThemeLocal } from './themes/canvasHighContrast';
+import canvas, { canvasThemeLocal } from './themes/canvas';
 import { primitives, additionalPrimitives } from './sharedThemeTokens/colors/primitives';
@@ -20,5 +20,5 @@ import dataVisualization from './sharedThemeTokens/colors/dataVisualization';
 };
-export { canvas, canvasHighContrast, primitives, additionalPrimitives, dataVisualization };
+export { canvas, canvasThemeLocal, canvasHighContrast, canvasHighContrastThemeLocal, primitives, additionalPrimitives, dataVisualization };
 export default canvas;
 export type { ThemeMap, BaseTheme, Theme, ThemeKeys, ThemeSpecificStyle, CanvasTheme, CanvasBrandVariables, CanvasHighContrastTheme, Primitives, AdditionalPrimitives, DataVisualization, UI };
 //# sourceMappingURL=index.d.ts.map

types/themes/canvas/index.d.ts

@@ -25,4 +25,11 @@ import sharedThemeTokens from '../../sharedThemeTokens';
 } & CanvasBrandVariables;
+/**
+ * Canvas theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ * Will be default in the next major version of InstUI
+ */
+declare const __theme: CanvasTheme;
 declare const theme: import("@instructure/theme-registry").Theme<CanvasTheme>;
 export default theme;
+export { __theme as canvasThemeLocal };
 //# sourceMappingURL=index.d.ts.map

types/themes/canvasHighContrast/index.d.ts

@@ -8,4 +8,12 @@ import sharedThemeTokens from '../../sharedThemeTokens';
 };
+/**
+ * Canvas high contrast theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ *
+ * Will be default in the next major version of InstUI
+ */
+declare const __theme: CanvasHighContrastTheme;
 declare const theme: import("@instructure/theme-registry").Theme<CanvasHighContrastTheme>;
 export default theme;
+export { __theme as canvasHighContrastThemeLocal };
 //# sourceMappingURL=index.d.ts.map

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

331645

increased by2.21%

Lines of code

3590

increased by4.06%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@instructure/console@10.5.1-pr-snapshot-1731420479891(transitive)

• + Added@instructure/shared-types@10.5.1-pr-snapshot-1731420479891(transitive)

• + Added@instructure/theme-registry@10.5.1-pr-snapshot-1731420479891(transitive)

• + Added@instructure/ui-dom-utils@10.5.1-pr-snapshot-1731420479891(transitive)

• + Added@instructure/ui-utils@10.5.1-pr-snapshot-1731420479891(transitive)

• - Removed@instructure/console@10.5.0(transitive)

• - Removed@instructure/shared-types@10.5.0(transitive)

• - Removed@instructure/theme-registry@10.5.0(transitive)

• - Removed@instructure/ui-dom-utils@10.5.0(transitive)

• - Removed@instructure/ui-utils@10.5.0(transitive)

• Updated@instructure/shared-types@10.5.1-pr-snapshot-1731420479891

• Updated@instructure/theme-registry@10.5.1-pr-snapshot-1731420479891