@instructure/ui-theme-tokens - npm Package Compare versions

Comparing version 9.3.0 to 9.3.1-pr-snapshot-1721304755254

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+## [9.3.1-pr-snapshot-1721304755254](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-pr-snapshot-1721304755254) (2024-07-18)
+
+
+### Features
+
+* **many:** rewrite color system ([aa974cb](https://github.com/instructure/instructure-ui/commit/aa974cb7c60d1e54b7cb1801fbbb82559989fd80))
+* **shared-types,ui-code-editor,ui-theme-tokens:** update color primitives ([517a1f6](https://github.com/instructure/instructure-ui/commit/517a1f60d3ac1eb0fa609e55da0cbf07ee9d8240))
+
+
+### BREAKING CHANGES
+
+* **many:** Breaks color overrides in certain cases
+
+
+
+
+
 # [9.3.0](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.3.0) (2024-07-17)
@@ -8,0 +25,0 @@

es/canvas/colors.js

@@ -25,21 +25,34 @@ /*
 
-import { functionalColors } from '../utils/functionalColors';
-const baseColors = {
-  brand: '#0374B5',
-  link: '#0374B5',
-  electric: '#0374B5',
-  shamrock: '#0B874B',
-  barney: '#BF32A4',
-  crimson: '#E0061F',
-  fire: '#FC5E13',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#6B7780',
-  slate: '#8B969E',
-  tiara: '#C7CDD1',
-  porcelain: '#F5F5F5',
-  white: '#FFFFFF'
+import primitives from '../common/colors/primitves';
+import getUIColors from '../utils/getUIColors';
+const contrasts = {
+  white1010: primitives.white,
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey12,
+  grey1424: primitives.grey14,
+  grey4570: primitives.grey45,
+  grey5782: primitives.grey57,
+  grey100100: primitives.grey100,
+  grey125125: primitives.grey125,
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue45,
+  blue5782: primitives.blue57,
+  green1212: primitives.green12,
+  green4570: primitives.green45,
+  green5782: primitives.green57,
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange30,
+  orange4570: primitives.orange45,
+  orange5782: primitives.orange57,
+  red1212: primitives.red12,
+  red4570: primitives.red45,
+  red5782: primitives.red57
 };
-const colors = Object.freeze(functionalColors(baseColors));
+const ui = getUIColors(contrasts);
+const colors = {
+  primitives,
+  contrasts,
+  ui
+};
 export default colors;
 export { colors };

es/canvasHighContrast/colors.js

@@ -25,21 +25,34 @@ /*
 
-import { functionalColors } from '../utils/functionalColors';
-const baseColors = {
-  brand: '#0770A3',
-  link: '#0770A3',
-  electric: '#0770A3',
-  shamrock: '#127A1B',
-  barney: '#B8309E',
-  crimson: '#D01A19',
-  fire: '#C23C0D',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#556572',
-  slate: '#556572',
-  tiara: '#556572',
-  porcelain: '#FFFFFF',
-  white: '#FFFFFF'
+import primitives from '../common/colors/primitves';
+import getUIColors from '../utils/getUIColors';
+const contrasts = {
+  white1010: primitives.white,
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey14,
+  grey1424: primitives.grey24,
+  grey4570: primitives.grey70,
+  grey5782: primitives.grey82,
+  grey100100: primitives.grey100,
+  grey125125: primitives.grey125,
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue70,
+  blue5782: primitives.blue82,
+  green1212: primitives.green12,
+  green4570: primitives.green70,
+  green5782: primitives.green82,
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange45,
+  orange4570: primitives.orange70,
+  orange5782: primitives.orange82,
+  red1212: primitives.red12,
+  red4570: primitives.red70,
+  red5782: primitives.red82
 };
-const colors = Object.freeze(functionalColors(baseColors));
+const ui = getUIColors(contrasts);
+const colors = {
+  primitives,
+  contrasts,
+  ui
+};
 export default colors;
 export { colors };

es/index.js

@@ -27,4 +27,3 @@ /*
 import { canvasHighContrast } from './canvasHighContrast';
-import { instructure } from './instructure';
-import { functionalColors } from './utils/functionalColors';
-export { canvas, canvasHighContrast, instructure, functionalColors };
+import primitives from './common/colors/primitves';
+export { canvas, canvasHighContrast, primitives };

lib/canvas/colors.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -7,3 +8,4 @@ value: true
 exports.default = exports.colors = void 0;
-var _functionalColors = require("../utils/functionalColors");
+var _primitves = _interopRequireDefault(require("../common/colors/primitves"));
+var _getUIColors = _interopRequireDefault(require("../utils/getUIColors"));
 /*
@@ -33,19 +35,31 @@ * The MIT License (MIT)
 
-const baseColors = {
-  brand: '#0374B5',
-  link: '#0374B5',
-  electric: '#0374B5',
-  shamrock: '#0B874B',
-  barney: '#BF32A4',
-  crimson: '#E0061F',
-  fire: '#FC5E13',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#6B7780',
-  slate: '#8B969E',
-  tiara: '#C7CDD1',
-  porcelain: '#F5F5F5',
-  white: '#FFFFFF'
+const contrasts = {
+  white1010: _primitves.default.white,
+  grey1111: _primitves.default.grey11,
+  grey1214: _primitves.default.grey12,
+  grey1424: _primitves.default.grey14,
+  grey4570: _primitves.default.grey45,
+  grey5782: _primitves.default.grey57,
+  grey100100: _primitves.default.grey100,
+  grey125125: _primitves.default.grey125,
+  blue1212: _primitves.default.blue12,
+  blue4570: _primitves.default.blue45,
+  blue5782: _primitves.default.blue57,
+  green1212: _primitves.default.green12,
+  green4570: _primitves.default.green45,
+  green5782: _primitves.default.green57,
+  orange1212: _primitves.default.orange12,
+  orange3045: _primitves.default.orange30,
+  orange4570: _primitves.default.orange45,
+  orange5782: _primitves.default.orange57,
+  red1212: _primitves.default.red12,
+  red4570: _primitves.default.red45,
+  red5782: _primitves.default.red57
 };
-const colors = exports.colors = Object.freeze((0, _functionalColors.functionalColors)(baseColors));
+const ui = (0, _getUIColors.default)(contrasts);
+const colors = exports.colors = {
+  primitives: _primitves.default,
+  contrasts,
+  ui
+};
 var _default = exports.default = colors;

lib/canvasHighContrast/colors.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -7,3 +8,4 @@ value: true
 exports.default = exports.colors = void 0;
-var _functionalColors = require("../utils/functionalColors");
+var _primitves = _interopRequireDefault(require("../common/colors/primitves"));
+var _getUIColors = _interopRequireDefault(require("../utils/getUIColors"));
 /*
@@ -33,19 +35,31 @@ * The MIT License (MIT)
 
-const baseColors = {
-  brand: '#0770A3',
-  link: '#0770A3',
-  electric: '#0770A3',
-  shamrock: '#127A1B',
-  barney: '#B8309E',
-  crimson: '#D01A19',
-  fire: '#C23C0D',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#556572',
-  slate: '#556572',
-  tiara: '#556572',
-  porcelain: '#FFFFFF',
-  white: '#FFFFFF'
+const contrasts = {
+  white1010: _primitves.default.white,
+  grey1111: _primitves.default.grey11,
+  grey1214: _primitves.default.grey14,
+  grey1424: _primitves.default.grey24,
+  grey4570: _primitves.default.grey70,
+  grey5782: _primitves.default.grey82,
+  grey100100: _primitves.default.grey100,
+  grey125125: _primitves.default.grey125,
+  blue1212: _primitves.default.blue12,
+  blue4570: _primitves.default.blue70,
+  blue5782: _primitves.default.blue82,
+  green1212: _primitves.default.green12,
+  green4570: _primitves.default.green70,
+  green5782: _primitves.default.green82,
+  orange1212: _primitves.default.orange12,
+  orange3045: _primitves.default.orange45,
+  orange4570: _primitves.default.orange70,
+  orange5782: _primitves.default.orange82,
+  red1212: _primitves.default.red12,
+  red4570: _primitves.default.red70,
+  red5782: _primitves.default.red82
 };
-const colors = exports.colors = Object.freeze((0, _functionalColors.functionalColors)(baseColors));
+const ui = (0, _getUIColors.default)(contrasts);
+const colors = exports.colors = {
+  primitives: _primitves.default,
+  contrasts,
+  ui
+};
 var _default = exports.default = colors;

lib/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -18,17 +19,10 @@ value: true
 });
-Object.defineProperty(exports, "functionalColors", {
+Object.defineProperty(exports, "primitives", {
   enumerable: true,
   get: function () {
-    return _functionalColors.functionalColors;
+    return _primitves.default;
   }
 });
-Object.defineProperty(exports, "instructure", {
-  enumerable: true,
-  get: function () {
-    return _instructure.instructure;
-  }
-});
 var _canvas = require("./canvas");
 var _canvasHighContrast = require("./canvasHighContrast");
-var _instructure = require("./instructure");
-var _functionalColors = require("./utils/functionalColors");
+var _primitves = _interopRequireDefault(require("./common/colors/primitves"));

package.json

 {
   "name": "@instructure/ui-theme-tokens",
-  "version": "9.3.0",
+  "version": "9.3.1-pr-snapshot-1721304755254",
   "description": "Cross-platform theme tokens for Instructure products",
@@ -25,9 +25,9 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.3.0",
-    "@instructure/ui-color-utils": "9.3.0",
-    "@instructure/ui-test-utils": "9.3.0"
+    "@instructure/ui-babel-preset": "9.3.1-pr-snapshot-1721304755254",
+    "@instructure/ui-color-utils": "9.3.1-pr-snapshot-1721304755254",
+    "@instructure/ui-test-utils": "9.3.1-pr-snapshot-1721304755254"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/shared-types": "9.3.0"
+    "@instructure/shared-types": "9.3.1-pr-snapshot-1721304755254"
   },
@@ -34,0 +34,0 @@ "publishConfig": {

src/canvas/colors.ts

@@ -25,24 +25,40 @@ /*
 
-import { functionalColors } from '../utils/functionalColors'
-import { BaseColors, Colors } from '@instructure/shared-types'
+import primitives from '../common/colors/primitves'
+import getUIColors from '../utils/getUIColors'
 
-const baseColors: BaseColors = {
-  brand: '#0374B5',
-  link: '#0374B5',
-  electric: '#0374B5',
-  shamrock: '#0B874B',
-  barney: '#BF32A4',
-  crimson: '#E0061F',
-  fire: '#FC5E13',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#6B7780',
-  slate: '#8B969E',
-  tiara: '#C7CDD1',
-  porcelain: '#F5F5F5',
-  white: '#FFFFFF'
+import type { Colors, Contrasts, UI } from '@instructure/shared-types'
+
+const contrasts: Contrasts = {
+  white1010: primitives.white,
+
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey12,
+  grey1424: primitives.grey14,
+  grey4570: primitives.grey45,
+  grey5782: primitives.grey57,
+  grey100100: primitives.grey100,
+  grey125125: primitives.grey125,
+
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue45,
+  blue5782: primitives.blue57,
+
+  green1212: primitives.green12,
+  green4570: primitives.green45,
+  green5782: primitives.green57,
+
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange30,
+  orange4570: primitives.orange45,
+  orange5782: primitives.orange57,
+
+  red1212: primitives.red12,
+  red4570: primitives.red45,
+  red5782: primitives.red57
 }
 
-const colors: Colors = Object.freeze(functionalColors(baseColors))
+const ui: UI = getUIColors(contrasts)
+
+const colors: Colors = { primitives, contrasts, ui }
 export default colors
 export { colors }

src/canvasHighContrast/colors.ts

@@ -25,25 +25,40 @@ /*
 
-import { functionalColors } from '../utils/functionalColors'
-import { BaseColors, Colors } from '@instructure/shared-types'
+import primitives from '../common/colors/primitves'
+import getUIColors from '../utils/getUIColors'
 
-const baseColors: BaseColors = {
-  brand: '#0770A3',
-  link: '#0770A3',
-  electric: '#0770A3',
-  shamrock: '#127A1B',
-  barney: '#B8309E',
-  crimson: '#D01A19',
-  fire: '#C23C0D',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#556572',
-  slate: '#556572',
-  tiara: '#556572',
-  porcelain: '#FFFFFF',
-  white: '#FFFFFF'
+import type { UI, Contrasts } from '@instructure/shared-types'
+
+const contrasts: Contrasts = {
+  white1010: primitives.white,
+
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey14,
+  grey1424: primitives.grey24,
+  grey4570: primitives.grey70,
+  grey5782: primitives.grey82,
+  grey100100: primitives.grey100,
+  grey125125: primitives.grey125,
+
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue70,
+  blue5782: primitives.blue82,
+
+  green1212: primitives.green12,
+  green4570: primitives.green70,
+  green5782: primitives.green82,
+
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange45,
+  orange4570: primitives.orange70,
+  orange5782: primitives.orange82,
+
+  red1212: primitives.red12,
+  red4570: primitives.red70,
+  red5782: primitives.red82
 }
 
-const colors: Colors = Object.freeze(functionalColors(baseColors))
+const ui: UI = getUIColors(contrasts)
 
+const colors = { primitives, contrasts, ui }
 export default colors
 export { colors }

src/index.ts

@@ -27,5 +27,4 @@ /*
 import { canvasHighContrast } from './canvasHighContrast'
-import { instructure } from './instructure'
-import { functionalColors } from './utils/functionalColors'
+import primitives from './common/colors/primitves'
 
-export { canvas, canvasHighContrast, instructure, functionalColors }
+export { canvas, canvasHighContrast, primitives }

tokens/canvas-high-contrast/source.json

@@ -1,1 +0,1 @@
-{"colors":{"brand":{"value":"#0770A3"},"link":{"value":"#0770A3"},"electric":{"value":"#0770A3"},"shamrock":{"value":"#127A1B"},"barney":{"value":"#B8309E"},"crimson":{"value":"#D01A19"},"fire":{"value":"#C23C0D"},"licorice":{"value":"#2D3B45"},"oxford":{"value":"#394B58"},"ash":{"value":"#556572"},"slate":{"value":"#556572"},"tiara":{"value":"#556572"},"porcelain":{"value":"#FFFFFF"},"white":{"value":"#FFFFFF"},"textDarkest":{"value":"#2D3B45"},"textDark":{"value":"#556572"},"textLight":{"value":"#FFFFFF"},"textLightest":{"value":"#FFFFFF"},"textBrand":{"value":"#0770A3"},"textLink":{"value":"#0770A3"},"textAlert":{"value":"#B8309E"},"textInfo":{"value":"#0770A3"},"textSuccess":{"value":"#127A1B"},"textDanger":{"value":"#D01A19"},"textWarning":{"value":"#C23C0D"},"backgroundDarkest":{"value":"#2D3B45"},"backgroundDark":{"value":"#556572"},"backgroundMedium":{"value":"#556572"},"backgroundLight":{"value":"#FFFFFF"},"backgroundLightest":{"value":"#FFFFFF"},"backgroundBrand":{"value":"#0770A3"},"backgroundBrandSecondary":{"value":"#394B58"},"backgroundAlert":{"value":"#B8309E"},"backgroundInfo":{"value":"#0770A3"},"backgroundSuccess":{"value":"#127A1B"},"backgroundDanger":{"value":"#D01A19"},"backgroundWarning":{"value":"#C23C0D"},"borderLightest":{"value":"#FFFFFF"},"borderLight":{"value":"#FFFFFF"},"borderMedium":{"value":"#556572"},"borderDark":{"value":"#556572"},"borderDarkest":{"value":"#2D3B45"},"borderBrand":{"value":"#0770A3"},"borderAlert":{"value":"#B8309E"},"borderInfo":{"value":"#0770A3"},"borderSuccess":{"value":"#127A1B"},"borderDanger":{"value":"#D01A19"},"borderWarning":{"value":"#C23C0D"},"borderDebug":{"value":"#D01A19"}},"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":{},"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}}}

tokens/canvas/source.json

@@ -1,1 +0,1 @@
-{"colors":{"brand":{"value":"#0374B5"},"link":{"value":"#0374B5"},"electric":{"value":"#0374B5"},"shamrock":{"value":"#0B874B"},"barney":{"value":"#BF32A4"},"crimson":{"value":"#E0061F"},"fire":{"value":"#FC5E13"},"licorice":{"value":"#2D3B45"},"oxford":{"value":"#394B58"},"ash":{"value":"#6B7780"},"slate":{"value":"#8B969E"},"tiara":{"value":"#C7CDD1"},"porcelain":{"value":"#F5F5F5"},"white":{"value":"#FFFFFF"},"textDarkest":{"value":"#2D3B45"},"textDark":{"value":"#6B7780"},"textLight":{"value":"#F5F5F5"},"textLightest":{"value":"#FFFFFF"},"textBrand":{"value":"#0374B5"},"textLink":{"value":"#0374B5"},"textAlert":{"value":"#BF32A4"},"textInfo":{"value":"#0374B5"},"textSuccess":{"value":"#0B874B"},"textDanger":{"value":"#E0061F"},"textWarning":{"value":"#FC5E13"},"backgroundDarkest":{"value":"#2D3B45"},"backgroundDark":{"value":"#6B7780"},"backgroundMedium":{"value":"#C7CDD1"},"backgroundLight":{"value":"#F5F5F5"},"backgroundLightest":{"value":"#FFFFFF"},"backgroundBrand":{"value":"#0374B5"},"backgroundBrandSecondary":{"value":"#394B58"},"backgroundAlert":{"value":"#BF32A4"},"backgroundInfo":{"value":"#0374B5"},"backgroundSuccess":{"value":"#0B874B"},"backgroundDanger":{"value":"#E0061F"},"backgroundWarning":{"value":"#FC5E13"},"borderLightest":{"value":"#FFFFFF"},"borderLight":{"value":"#F5F5F5"},"borderMedium":{"value":"#C7CDD1"},"borderDark":{"value":"#6B7780"},"borderDarkest":{"value":"#2D3B45"},"borderBrand":{"value":"#0374B5"},"borderAlert":{"value":"#BF32A4"},"borderInfo":{"value":"#0374B5"},"borderSuccess":{"value":"#0B874B"},"borderDanger":{"value":"#E0061F"},"borderWarning":{"value":"#FC5E13"},"borderDebug":{"value":"#E0061F"}},"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":{},"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}}}

types/canvas/colors.d.ts

@@ -1,2 +0,2 @@
-import { Colors } from '@instructure/shared-types';
+import type { Colors } from '@instructure/shared-types';
 declare const colors: Colors;
@@ -3,0 +3,0 @@ export default colors;

types/canvasHighContrast/colors.d.ts

@@ -1,5 +0,9 @@
-import { Colors } from '@instructure/shared-types';
-declare const colors: Colors;
+import type { UI, Contrasts } from '@instructure/shared-types';
+declare const colors: {
+    primitives: import("@instructure/shared-types").Primitives;
+    contrasts: Contrasts;
+    ui: UI;
+};
 export default colors;
 export { colors };
 //# sourceMappingURL=colors.d.ts.map

types/canvasHighContrast/index.d.ts

 declare const canvasHighContrast: {
-    colors: import("@instructure/shared-types").Colors;
+    colors: {
+        primitives: import("@instructure/shared-types").Primitives;
+        contrasts: import("@instructure/shared-types").Contrasts;
+        ui: import("@instructure/shared-types").UI;
+    };
     borders: import("@instructure/shared-types").Border;
@@ -4,0 +8,0 @@ transitions: import("@instructure/shared-types").Transitions;

types/index.d.ts

 import { canvas } from './canvas';
 import { canvasHighContrast } from './canvasHighContrast';
-import { instructure } from './instructure';
-import { functionalColors } from './utils/functionalColors';
-export { canvas, canvasHighContrast, instructure, functionalColors };
+import primitives from './common/colors/primitves';
+export { canvas, canvasHighContrast, primitives };
 //# 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

Worsened metrics

Total package byte prevSize

215541

decreased by-13.7%

Number of package files

96

decreased by-15.04%

Lines of code

2243

decreased by-15.68%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@instructure/shared-types@9.3.1-pr-snapshot-1721304755254(transitive)

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

• Updated@instructure/shared-types@9.3.1-pr-snapshot-1721304755254