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

Comparing version 9.5.2-snapshot-7 to 9.5.2

CHANGELOG.md

@@ -6,19 +6,10 @@ # Change Log
 
-## [9.5.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-7) (2024-07-31)
+## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
 
+**Note:** Version bump only for package @instructure/ui-theme-tokens
 
-### Features
 
-* **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
-* **shared-types,ui-theme-tokens:** add transparent colors to the palette ([7219606](https://github.com/instructure/instructure-ui/commit/7219606144114fd4bf4048177dfe31ee81de76d9))
 
 
-### BREAKING CHANGES
 
-* **many:** Breaks color overrides in certain cases
-
-
-
-
-
 ## [9.5.1](https://github.com/instructure/instructure-ui/compare/v9.5.0...v9.5.1) (2024-07-30)
@@ -25,0 +16,0 @@

es/canvas/colors.js

@@ -25,37 +25,21 @@ /*
 
-import primitives from '../common/colors/primitves';
-import getUIColors from '../utils/getUIColors';
-const contrasts = {
-  white1010: primitives.white,
-  white1010op75: primitives.white10op75,
-  grey1111: primitives.grey11,
-  grey1214: primitives.grey12,
-  grey1424: primitives.grey14,
-  grey2424: primitives.grey24,
-  grey4570: primitives.grey45,
-  grey5782: primitives.grey57,
-  grey100100: primitives.grey100,
-  grey100100op75: primitives.grey100op75,
-  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
+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'
 };
-const ui = getUIColors(contrasts);
-const colors = {
-  primitives,
-  contrasts,
-  ui
-};
+const colors = Object.freeze(functionalColors(baseColors));
 export default colors;
 export { colors };

es/canvasHighContrast/colors.js

@@ -25,37 +25,21 @@ /*
 
-import primitives from '../common/colors/primitves';
-import getUIColors from '../utils/getUIColors';
-const contrasts = {
-  white1010: primitives.white,
-  white1010op75: primitives.white10op75,
-  grey1111: primitives.grey11,
-  grey1214: primitives.grey14,
-  grey1424: primitives.grey24,
-  grey2424: primitives.grey24,
-  grey4570: primitives.grey70,
-  grey5782: primitives.grey82,
-  grey100100: primitives.grey100,
-  grey100100op75: primitives.grey100op75,
-  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
+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'
 };
-const ui = getUIColors(contrasts);
-const colors = {
-  primitives,
-  contrasts,
-  ui
-};
+const colors = Object.freeze(functionalColors(baseColors));
 export default colors;
 export { colors };

es/index.js

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

lib/canvas/colors.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,4 +7,3 @@ value: true
 exports.default = exports.colors = void 0;
-var _primitves = _interopRequireDefault(require("../common/colors/primitves"));
-var _getUIColors = _interopRequireDefault(require("../utils/getUIColors"));
+var _functionalColors = require("../utils/functionalColors");
 /*
@@ -35,34 +33,19 @@ * The MIT License (MIT)
 
-const contrasts = {
-  white1010: _primitves.default.white,
-  white1010op75: _primitves.default.white10op75,
-  grey1111: _primitves.default.grey11,
-  grey1214: _primitves.default.grey12,
-  grey1424: _primitves.default.grey14,
-  grey2424: _primitves.default.grey24,
-  grey4570: _primitves.default.grey45,
-  grey5782: _primitves.default.grey57,
-  grey100100: _primitves.default.grey100,
-  grey100100op75: _primitves.default.grey100op75,
-  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 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 ui = (0, _getUIColors.default)(contrasts);
-const colors = exports.colors = {
-  primitives: _primitves.default,
-  contrasts,
-  ui
-};
+const colors = exports.colors = Object.freeze((0, _functionalColors.functionalColors)(baseColors));
 var _default = exports.default = colors;

lib/canvasHighContrast/colors.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,4 +7,3 @@ value: true
 exports.default = exports.colors = void 0;
-var _primitves = _interopRequireDefault(require("../common/colors/primitves"));
-var _getUIColors = _interopRequireDefault(require("../utils/getUIColors"));
+var _functionalColors = require("../utils/functionalColors");
 /*
@@ -35,34 +33,19 @@ * The MIT License (MIT)
 
-const contrasts = {
-  white1010: _primitves.default.white,
-  white1010op75: _primitves.default.white10op75,
-  grey1111: _primitves.default.grey11,
-  grey1214: _primitves.default.grey14,
-  grey1424: _primitves.default.grey24,
-  grey2424: _primitves.default.grey24,
-  grey4570: _primitves.default.grey70,
-  grey5782: _primitves.default.grey82,
-  grey100100: _primitves.default.grey100,
-  grey100100op75: _primitves.default.grey100op75,
-  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 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 ui = (0, _getUIColors.default)(contrasts);
-const colors = exports.colors = {
-  primitives: _primitves.default,
-  contrasts,
-  ui
-};
+const colors = exports.colors = Object.freeze((0, _functionalColors.functionalColors)(baseColors));
 var _default = exports.default = colors;

lib/index.js

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

package.json

 {
   "name": "@instructure/ui-theme-tokens",
-  "version": "9.5.2-snapshot-7",
+  "version": "9.5.2",
   "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.5.2-snapshot-7",
-    "@instructure/ui-color-utils": "9.5.2-snapshot-7",
-    "@instructure/ui-test-utils": "9.5.2-snapshot-7"
+    "@instructure/ui-babel-preset": "9.5.2",
+    "@instructure/ui-color-utils": "9.5.2",
+    "@instructure/ui-test-utils": "9.5.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/shared-types": "9.5.2-snapshot-7"
+    "@instructure/shared-types": "9.5.2"
   },
@@ -34,0 +34,0 @@ "publishConfig": {

src/canvas/colors.ts

@@ -25,43 +25,24 @@ /*
 
-import primitives from '../common/colors/primitves'
-import getUIColors from '../utils/getUIColors'
+import { functionalColors } from '../utils/functionalColors'
+import { BaseColors, Colors } from '@instructure/shared-types'
 
-import type { Colors, Contrasts, UI } from '@instructure/shared-types'
-
-const contrasts: Contrasts = {
-  white1010: primitives.white,
-  white1010op75: primitives.white10op75,
-
-  grey1111: primitives.grey11,
-  grey1214: primitives.grey12,
-  grey1424: primitives.grey14,
-  grey2424: primitives.grey24,
-  grey4570: primitives.grey45,
-  grey5782: primitives.grey57,
-  grey100100: primitives.grey100,
-  grey100100op75: primitives.grey100op75,
-  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 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'
 }
 
-const ui: UI = getUIColors(contrasts)
-
-const colors: Colors = { primitives, contrasts, ui }
+const colors: Colors = Object.freeze(functionalColors(baseColors))
 export default colors
 export { colors }

src/canvasHighContrast/colors.ts

@@ -25,43 +25,25 @@ /*
 
-import primitives from '../common/colors/primitves'
-import getUIColors from '../utils/getUIColors'
+import { functionalColors } from '../utils/functionalColors'
+import { BaseColors, Colors } from '@instructure/shared-types'
 
-import type { UI, Contrasts } from '@instructure/shared-types'
-
-const contrasts: Contrasts = {
-  white1010: primitives.white,
-  white1010op75: primitives.white10op75,
-
-  grey1111: primitives.grey11,
-  grey1214: primitives.grey14,
-  grey1424: primitives.grey24,
-  grey2424: primitives.grey24,
-  grey4570: primitives.grey70,
-  grey5782: primitives.grey82,
-  grey100100: primitives.grey100,
-  grey100100op75: primitives.grey100op75,
-  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 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'
 }
 
-const ui: UI = getUIColors(contrasts)
+const colors: Colors = Object.freeze(functionalColors(baseColors))
 
-const colors = { primitives, contrasts, ui }
 export default colors
 export { colors }

src/index.ts

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

tokens/canvas-high-contrast/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}}}
+{"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}}}

tokens/canvas/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}}}
+{"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}}}

types/canvas/colors.d.ts

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

types/canvasHighContrast/colors.d.ts

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

types/canvasHighContrast/index.d.ts

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

types/index.d.ts

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

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

Improved metrics

Total package byte prevSize

250446

increased by15.34%

Number of package files

113

increased by17.71%

Lines of code

2660

increased by17.86%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@instructure/shared-types@9.5.2(transitive)

• - Removed@instructure/shared-types@9.5.2-snapshot-7(transitive)

• Updated@instructure/shared-types@9.5.2