@instructure/canvas-high-contrast-theme - npm Package Compare versions

Comparing version 10.0.1-snapshot-9 to 10.1.1-snapshot-4973

CHANGELOG.md

@@ -6,10 +6,24 @@ # Change Log
 
-## [10.0.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-9) (2024-08-14)
+## [10.1.1-snapshot-4973](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.1.1-snapshot-4973) (2024-08-23)
 
-**Note:** Version bump only for package @instructure/canvas-high-contrast-theme
 
+### Features
 
+* **many:** add data visualization colors, refactor theme code ([c395e17](https://github.com/instructure/instructure-ui/commit/c395e17a43be9fd7ec9d6854f28ae8584c3667bc))
 
 
 
+
+
+# [10.1.0](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.1.0) (2024-08-23)
+
+
+### Features
+
+* **many:** add data visualization colors, refactor theme code ([c395e17](https://github.com/instructure/instructure-ui/commit/c395e17a43be9fd7ec9d6854f28ae8584c3667bc))
+
+
+
+
+
 # [10.0.0](https://github.com/instructure/instructure-ui/compare/v9.5.1...v10.0.0) (2024-07-31)
@@ -16,0 +30,0 @@

es/index.js

@@ -25,4 +25,3 @@ /*
 
-import { canvasHighContrast } from '@instructure/ui-theme-tokens';
-import { ThemeRegistry } from '@instructure/theme-registry';
+import { canvasHighContrast } from '@instructure/ui-themes';
 const borders = canvasHighContrast.borders,
@@ -39,9 +38,4 @@ breakpoints = canvasHighContrast.breakpoints,
 const key = 'canvas-high-contrast';
-const __theme = {
-  key,
-  description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
-  ...canvasHighContrast
-};
-const theme = ThemeRegistry.registerTheme(__theme);
+const theme = canvasHighContrast;
 export default theme;
 export { theme, key, colors, borders, transitions, typography, spacing, forms, media, breakpoints, shadows, stacking };

lib/index.js

@@ -7,4 +7,3 @@ "use strict";
 exports.typography = exports.transitions = exports.theme = exports.stacking = exports.spacing = exports.shadows = exports.media = exports.key = exports.forms = exports.default = exports.colors = exports.breakpoints = exports.borders = void 0;
-var _canvasHighContrast = require("@instructure/ui-theme-tokens/lib/canvasHighContrast");
-var _themeRegistry = require("@instructure/theme-registry");
+var _uiThemes = require("@instructure/ui-themes");
 /*
@@ -34,19 +33,14 @@ * The MIT License (MIT)
 
-const borders = exports.borders = _canvasHighContrast.canvasHighContrast.borders,
-  breakpoints = exports.breakpoints = _canvasHighContrast.canvasHighContrast.breakpoints,
-  colors = exports.colors = _canvasHighContrast.canvasHighContrast.colors,
-  forms = exports.forms = _canvasHighContrast.canvasHighContrast.forms,
-  media = exports.media = _canvasHighContrast.canvasHighContrast.media,
-  shadows = exports.shadows = _canvasHighContrast.canvasHighContrast.shadows,
-  spacing = exports.spacing = _canvasHighContrast.canvasHighContrast.spacing,
-  stacking = exports.stacking = _canvasHighContrast.canvasHighContrast.stacking,
-  transitions = exports.transitions = _canvasHighContrast.canvasHighContrast.transitions,
-  typography = exports.typography = _canvasHighContrast.canvasHighContrast.typography;
+const borders = exports.borders = _uiThemes.canvasHighContrast.borders,
+  breakpoints = exports.breakpoints = _uiThemes.canvasHighContrast.breakpoints,
+  colors = exports.colors = _uiThemes.canvasHighContrast.colors,
+  forms = exports.forms = _uiThemes.canvasHighContrast.forms,
+  media = exports.media = _uiThemes.canvasHighContrast.media,
+  shadows = exports.shadows = _uiThemes.canvasHighContrast.shadows,
+  spacing = exports.spacing = _uiThemes.canvasHighContrast.spacing,
+  stacking = exports.stacking = _uiThemes.canvasHighContrast.stacking,
+  transitions = exports.transitions = _uiThemes.canvasHighContrast.transitions,
+  typography = exports.typography = _uiThemes.canvasHighContrast.typography;
 const key = exports.key = 'canvas-high-contrast';
-const __theme = {
-  key,
-  description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
-  ..._canvasHighContrast.canvasHighContrast
-};
-const theme = exports.theme = _themeRegistry.ThemeRegistry.registerTheme(__theme);
+const theme = exports.theme = _uiThemes.canvasHighContrast;
 var _default = exports.default = theme;

package.json

 {
   "name": "@instructure/canvas-high-contrast-theme",
-  "version": "10.0.1-snapshot-9",
+  "version": "10.1.1-snapshot-4973",
   "description": "A high contrast theme for Canvas LMS made by Instructure Inc.",
@@ -25,9 +25,9 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.0.1-snapshot-9"
+    "@instructure/ui-babel-preset": "10.1.1-snapshot-4973"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/shared-types": "10.0.1-snapshot-9",
-    "@instructure/theme-registry": "10.0.1-snapshot-9",
-    "@instructure/ui-theme-tokens": "10.0.1-snapshot-9"
+    "@instructure/shared-types": "10.1.1-snapshot-4973",
+    "@instructure/theme-registry": "10.1.1-snapshot-4973",
+    "@instructure/ui-themes": "10.1.1-snapshot-4973"
   },
@@ -34,0 +34,0 @@ "publishConfig": {

src/index.ts

@@ -25,5 +25,4 @@ /*
 
-import { canvasHighContrast } from '@instructure/ui-theme-tokens'
-import { BaseTheme } from '@instructure/shared-types'
-import { ThemeRegistry } from '@instructure/theme-registry'
+import { canvasHighContrast } from '@instructure/ui-themes'
+import type { CanvasHighContrastTheme } from '@instructure/ui-themes'
 
@@ -45,13 +44,4 @@ const {
 
-export type CanvasHighContrastTheme = BaseTheme & {
-  key: 'canvas-high-contrast'
-} & typeof canvasHighContrast
+const theme = canvasHighContrast
 
-const __theme: CanvasHighContrastTheme = {
-  key,
-  description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
-  ...canvasHighContrast
-}
-const theme = ThemeRegistry.registerTheme(__theme)
-
 export default theme
@@ -72,1 +62,3 @@ export {
 }
+
+export type { CanvasHighContrastTheme }

tokens/source.json

@@ -1,1 +0,1 @@
-{"colors":{},"borders":{"radiusSmall":{"value":"0.125rem"},"radiusMedium":{"value":"0.25rem"},"radiusLarge":{"value":"0.5rem"},"widthSmall":{"value":"0.0625rem"},"widthMedium":{"value":"0.125rem"},"widthLarge":{"value":"0.25rem"},"style":{"value":"solid"}},"transitions":{"duration":{"value":"300ms"},"timing":{"value":"ease-in-out"}},"typography":{"fontFamily":{"value":"LatoWeb, Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif"},"fontFamilyMonospace":{"value":"Menlo, Consolas, Monaco, \"Andale Mono\", monospace"},"fontSizeXSmall":{"value":"0.75rem"},"fontSizeSmall":{"value":"0.875rem"},"fontSizeMedium":{"value":"1rem"},"fontSizeLarge":{"value":"1.375rem"},"fontSizeXLarge":{"value":"1.75rem"},"fontSizeXXLarge":{"value":"2.375rem"},"fontWeightLight":{"value":300},"fontWeightNormal":{"value":400},"fontWeightBold":{"value":700},"lineHeight":{"value":1.5},"lineHeightFit":{"value":1.125},"lineHeightCondensed":{"value":1.25},"lineHeightDouble":{"value":2},"letterSpacingNormal":{"value":0},"letterSpacingCondensed":{"value":"-0.0625rem"},"letterSpacingExpanded":{"value":"0.0625rem"}},"spacing":{"xxxSmall":{"value":"0.125rem"},"xxSmall":{"value":"0.375rem"},"xSmall":{"value":"0.5rem"},"small":{"value":"0.75rem"},"mediumSmall":{"value":"1rem"},"medium":{"value":"1.5rem"},"large":{"value":"2.25rem"},"xLarge":{"value":"3rem"},"xxLarge":{"value":"3.75rem"}},"forms":{"inputHeightSmall":{"value":"1.75rem"},"inputHeightMedium":{"value":"2.375rem"},"inputHeightLarge":{"value":"3rem"}},"breakpoints":{"xxSmall":{"value":"8em"},"xSmall":{"value":"16em"},"small":{"value":"30em"},"medium":{"value":"48em"},"tablet":{"value":"48em"},"large":{"value":"62em"},"desktop":{"value":"64em"},"xLarge":{"value":"75em"},"maxWidth":{"value":"61.9375em"}},"shadows":{"depth1":{"value":"0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)"},"depth2":{"value":"0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)"},"depth3":{"value":"0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)"},"resting":{"value":"0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)"},"above":{"value":"0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)"},"topmost":{"value":"0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)"}},"stacking":{"topmost":{"value":9999},"above":{"value":1},"below":{"value":-1},"deepest":{"value":-9999}}}
+{"borders":{"radiusSmall":{"value":"0.125rem"},"radiusMedium":{"value":"0.25rem"},"radiusLarge":{"value":"0.5rem"},"widthSmall":{"value":"0.0625rem"},"widthMedium":{"value":"0.125rem"},"widthLarge":{"value":"0.25rem"},"style":{"value":"solid"}},"transitions":{"duration":{"value":"300ms"},"timing":{"value":"ease-in-out"}},"typography":{"fontFamily":{"value":"LatoWeb, Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif"},"fontFamilyMonospace":{"value":"Menlo, Consolas, Monaco, \"Andale Mono\", monospace"},"fontSizeXSmall":{"value":"0.75rem"},"fontSizeSmall":{"value":"0.875rem"},"fontSizeMedium":{"value":"1rem"},"fontSizeLarge":{"value":"1.375rem"},"fontSizeXLarge":{"value":"1.75rem"},"fontSizeXXLarge":{"value":"2.375rem"},"fontWeightLight":{"value":300},"fontWeightNormal":{"value":400},"fontWeightBold":{"value":700},"lineHeight":{"value":1.5},"lineHeightFit":{"value":1.125},"lineHeightCondensed":{"value":1.25},"lineHeightDouble":{"value":2},"letterSpacingNormal":{"value":0},"letterSpacingCondensed":{"value":"-0.0625rem"},"letterSpacingExpanded":{"value":"0.0625rem"}},"spacing":{"xxxSmall":{"value":"0.125rem"},"xxSmall":{"value":"0.375rem"},"xSmall":{"value":"0.5rem"},"small":{"value":"0.75rem"},"mediumSmall":{"value":"1rem"},"medium":{"value":"1.5rem"},"large":{"value":"2.25rem"},"xLarge":{"value":"3rem"},"xxLarge":{"value":"3.75rem"}},"forms":{"inputHeightSmall":{"value":"1.75rem"},"inputHeightMedium":{"value":"2.375rem"},"inputHeightLarge":{"value":"3rem"}},"breakpoints":{"xxSmall":{"value":"8em"},"xSmall":{"value":"16em"},"small":{"value":"30em"},"medium":{"value":"48em"},"tablet":{"value":"48em"},"large":{"value":"62em"},"desktop":{"value":"64em"},"xLarge":{"value":"75em"},"maxWidth":{"value":"61.9375em"}},"shadows":{"depth1":{"value":"0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)"},"depth2":{"value":"0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)"},"depth3":{"value":"0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)"},"resting":{"value":"0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)"},"above":{"value":"0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)"},"topmost":{"value":"0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)"}},"stacking":{"topmost":{"value":9999},"above":{"value":1},"below":{"value":-1},"deepest":{"value":-9999}},"colors":{"primitives":{"white":{"value":"#FFFFFF"},"white10op75":{"value":"#FFFFFFBF"},"grey11":{"value":"#F2F4F4"},"grey12":{"value":"#E8EAEC"},"grey14":{"value":"#D7DADE"},"grey24":{"value":"#9EA6AD"},"grey45":{"value":"#6A7883"},"grey57":{"value":"#586874"},"grey70":{"value":"#4A5B68"},"grey82":{"value":"#3F515E"},"grey100":{"value":"#334451"},"grey100op75":{"value":"#334451BF"},"grey125":{"value":"#273540"},"blue12":{"value":"#E0EBF5"},"blue45":{"value":"#2B7ABC"},"blue57":{"value":"#0E68B3"},"blue70":{"value":"#0A5A9E"},"blue82":{"value":"#09508C"},"green12":{"value":"#DCEEE4"},"green45":{"value":"#03893D"},"green57":{"value":"#027634"},"green70":{"value":"#02672D"},"green82":{"value":"#015B28"},"orange12":{"value":"#FCE5D9"},"orange30":{"value":"#F06E26"},"orange45":{"value":"#CF4A00"},"orange57":{"value":"#B34000"},"orange70":{"value":"#9C3800"},"orange82":{"value":"#8B3200"},"red12":{"value":"#FCE4E5"},"red45":{"value":"#E62429"},"red57":{"value":"#C71F23"},"red70":{"value":"#AE1B1F"},"red82":{"value":"#9B181C"}},"contrasts":{"white1010":{"value":"#FFFFFF"},"white1010op75":{"value":"#FFFFFFBF"},"grey1111":{"value":"#F2F4F4"},"grey1214":{"value":"#D7DADE"},"grey1424":{"value":"#9EA6AD"},"grey2424":{"value":"#9EA6AD"},"grey4570":{"value":"#4A5B68"},"grey5782":{"value":"#3F515E"},"grey100100":{"value":"#334451"},"grey100100op75":{"value":"#334451BF"},"grey125125":{"value":"#273540"},"blue1212":{"value":"#E0EBF5"},"blue4570":{"value":"#0A5A9E"},"blue5782":{"value":"#09508C"},"green1212":{"value":"#DCEEE4"},"green4570":{"value":"#02672D"},"green5782":{"value":"#015B28"},"orange1212":{"value":"#FCE5D9"},"orange3045":{"value":"#CF4A00"},"orange4570":{"value":"#9C3800"},"orange5782":{"value":"#8B3200"},"red1212":{"value":"#FCE4E5"},"red4570":{"value":"#AE1B1F"},"red5782":{"value":"#9B181C"}},"ui":{"surfacePagePrimary":{"value":"#FFFFFF"},"surfacePageSecondary":{"value":"#F2F4F4"},"surfaceCardPrimary":{"value":"#FFFFFF"},"surfaceCardSecondary":{"value":"#F2F4F4"},"surfaceDark":{"value":"#334451"},"textTitle":{"value":"#273540"},"textDescription":{"value":"#273540"},"textBody":{"value":"#273540"},"textTimestamp":{"value":"#3F515E"},"textAuthor":{"value":"#3F515E"},"textDatapoint":{"value":"#3F515E"},"textLink":{"value":"#09508C"},"textPlaceholder":{"value":"#9EA6AD"},"textSuccess":{"value":"#015B28"},"textWarning":{"value":"#8B3200"},"textError":{"value":"#9B181C"},"lineStroke":{"value":"#9EA6AD"},"lineDivider":{"value":"#D7DADE"},"surfaceOverlayGrey":{"value":"#334451BF"},"surfaceOverlayWhite":{"value":"#FFFFFFBF"},"surfaceAttention":{"value":"#0A5A9E"},"surfaceSuccess":{"value":"#02672D"},"surfaceWarning":{"value":"#9C3800"},"surfaceError":{"value":"#AE1B1F"},"surfaceDivider":{"value":"#D7DADE"},"textSurfaceColored":{"value":"#FFFFFF"},"iconDefault":{"value":"#273540"},"iconSuccess":{"value":"#02672D"},"iconWarning":{"value":"#9C3800"},"iconError":{"value":"#AE1B1F"},"iconSurfaceColored":{"value":"#FFFFFF"},"lineConnector":{"value":"#9EA6AD"}}}}

tsconfig.build.json

@@ -17,3 +17,3 @@ {
     {
-      "path": "../ui-theme-tokens/tsconfig.build.json"
+      "path": "../ui-themes/tsconfig.build.json"
     },
@@ -20,0 +20,0 @@ {

types/index.d.ts

@@ -1,15 +0,8 @@
-import { canvasHighContrast } from '@instructure/ui-theme-tokens';
-import { BaseTheme } from '@instructure/shared-types';
-declare const borders: import("@instructure/shared-types").Border, breakpoints: import("@instructure/shared-types").Breakpoints, colors: {
-    primitives: import("@instructure/shared-types").Primitives;
-    contrasts: import("@instructure/shared-types").Contrasts;
-    ui: import("@instructure/shared-types").UI;
-}, forms: import("@instructure/shared-types").Forms, media: import("@instructure/shared-types").Media, shadows: import("@instructure/shared-types").Shadows, spacing: import("@instructure/shared-types").Spacing, stacking: import("@instructure/shared-types").Stacking, transitions: import("@instructure/shared-types").Transitions, typography: import("@instructure/shared-types").Typography;
+import type { CanvasHighContrastTheme } from '@instructure/ui-themes';
+declare const borders: import("@instructure/shared-types").Border, breakpoints: import("@instructure/shared-types").Breakpoints, colors: import("@instructure/shared-types").Colors, forms: import("@instructure/shared-types").Forms, media: import("@instructure/shared-types").Media, shadows: import("@instructure/shared-types").Shadows, spacing: import("@instructure/shared-types").Spacing, stacking: import("@instructure/shared-types").Stacking, transitions: import("@instructure/shared-types").Transitions, typography: import("@instructure/shared-types").Typography;
 declare const key = "canvas-high-contrast";
-export type CanvasHighContrastTheme = BaseTheme & {
-    key: 'canvas-high-contrast';
-} & typeof canvasHighContrast;
 declare const theme: import("@instructure/theme-registry").Theme<CanvasHighContrastTheme>;
 export default theme;
 export { theme, key, colors, borders, transitions, typography, spacing, forms, media, breakpoints, shadows, stacking };
+export type { CanvasHighContrastTheme };
 //# 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

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

131343

increased by4.84%

Worsened metrics

Lines of code

169

decreased by-13.33%

Dependency changes

• + Added@instructure/ui-themes@10.1.1-snapshot-4973

• + Added@instructure/console@10.1.1-snapshot-4973(transitive)

• + Added@instructure/shared-types@10.1.1-snapshot-4973(transitive)

• + Added@instructure/theme-registry@10.1.1-snapshot-4973(transitive)

• + Added@instructure/ui-dom-utils@10.1.1-snapshot-4973(transitive)

• + Added@instructure/ui-themes@10.1.1-snapshot-4973(transitive)

• + Added@instructure/ui-utils@10.1.1-snapshot-4973(transitive)

• - Removed@instructure/ui-theme-tokens@10.0.1-snapshot-9

• - Removed@instructure/console@10.0.1-snapshot-9(transitive)

• - Removed@instructure/shared-types@10.0.1-snapshot-9(transitive)

• - Removed@instructure/theme-registry@10.0.1-snapshot-9(transitive)

• - Removed@instructure/ui-dom-utils@10.0.1-snapshot-9(transitive)

• - Removed@instructure/ui-theme-tokens@10.0.1-snapshot-9(transitive)

• - Removed@instructure/ui-utils@10.0.1-snapshot-9(transitive)

• Updated@instructure/shared-types@10.1.1-snapshot-4973

• Updated@instructure/theme-registry@10.1.1-snapshot-4973