@instructure/ui-theme-tokens 9.5.2-snapshot-1 → 10.0.0

package/src/canvas/colors.ts

@@ -22,26 +22,45 @@
  * SOFTWARE.
  */
 
-import { functionalColors } from '../utils/functionalColors'
-import { BaseColors, Colors } from '@instructure/shared-types'
-
-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 primitives from '../common/colors/primitves'
+import getUIColors from '../utils/getUIColors'
+
+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 colors: Colors = Object.freeze(functionalColors(baseColors))
+const ui: UI = getUIColors(contrasts)
+
+const colors: Colors = { primitives, contrasts, ui }
 export default colors
 export { colors }

package/src/canvasHighContrast/colors.ts

@@ -22,27 +22,45 @@
  * SOFTWARE.
  */
 
-import { functionalColors } from '../utils/functionalColors'
-import { BaseColors, Colors } from '@instructure/shared-types'
-
-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 primitives from '../common/colors/primitves'
+import getUIColors from '../utils/getUIColors'
+
+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 colors: Colors = Object.freeze(functionalColors(baseColors))
+const ui: UI = getUIColors(contrasts)
 
+const colors = { primitives, contrasts, ui }
 export default colors
 export { colors }

package/src/{instructure/forms.ts → common/colors/index.ts}

@@ -22,13 +22,10 @@
  * SOFTWARE.
  */
 
-import { Forms } from '@instructure/shared-types'
+import primitives from './primitves'
 
-const forms: Forms = Object.freeze({
-  inputHeightSmall: '2rem',
-  inputHeightMedium: '2.75rem',
-  inputHeightLarge: '3.375rem'
-} as const)
+const colors = {
+  primitives
+}
 
-export default forms
-export { forms }
+export default colors

package/src/{instructure/index.ts → common/colors/primitves.ts}

@@ -22,19 +22,48 @@
  * SOFTWARE.
  */
 
-import { canvas } from '../canvas'
-import { colors } from './colors'
-import { forms } from './forms'
-import { spacing } from './spacing'
-import { typography } from './typography'
-
-const instructure = {
-  ...canvas,
-  colors,
-  forms,
-  spacing,
-  typography
+import { Primitives } from '@instructure/shared-types'
+
+const primitives: Primitives = {
+  white: '#FFFFFF',
+  white10op75: '#FFFFFFBF',
+
+  grey11: '#F2F4F4',
+  grey12: '#E8EAEC',
+  grey14: '#D7DADE',
+  grey24: '#9EA6AD',
+  grey45: '#6A7883',
+  grey57: '#586874',
+  grey70: '#4A5B68',
+  grey82: '#3F515E',
+  grey100: '#334451',
+  grey100op75: '#334451BF',
+  grey125: '#273540',
+
+  blue12: '#E0EBF5',
+  blue45: '#2B7ABC',
+  blue57: '#0E68B3',
+  blue70: '#0A5A9E',
+  blue82: '#09508C',
+
+  green12: '#DCEEE4',
+  green45: '#03893D',
+  green57: '#027634',
+  green70: '#02672D',
+  green82: '#015B28',
+
+  orange12: '#FCE5D9',
+  orange30: '#F06E26',
+  orange45: '#CF4A00',
+  orange57: '#B34000',
+  orange70: '#9C3800',
+  orange82: '#8B3200',
+
+  red12: '#FCE4E5',
+  red45: '#E62429',
+  red57: '#C71F23',
+  red70: '#AE1B1F',
+  red82: '#9B181C'
 }
 
-export default instructure
-export { instructure }
+export default primitives

package/src/index.ts

@@ -24,7 +24,6 @@
 
 import { canvas } from './canvas'
 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 }

package/src/{instructure/spacing.ts → utils/getUIColors.ts}

@@ -22,19 +22,33 @@
  * SOFTWARE.
  */
 
-import { Spacing } from '@instructure/shared-types'
+import type { Contrasts, UI } from '@instructure/shared-types'
 
-const spacing: Spacing = Object.freeze({
-  xxxSmall: '0.125rem',
-  xxSmall: '0.375rem',
-  xSmall: '0.75rem',
-  small: '1rem',
-  mediumSmall: '1.25rem',
-  medium: '1.5rem',
-  large: '2.25rem',
-  xLarge: '3rem',
-  xxLarge: '3.75rem'
+export const getUIColors = (contrasts: Contrasts): UI => ({
+  surfacePagePrimary: contrasts?.white1010,
+  surfacePageSecondary: contrasts?.grey1111,
+  surfaceCardPrimary: contrasts?.white1010,
+  surfaceCardSecondary: contrasts?.grey1111,
+  surfaceDark: contrasts?.grey100100,
+
+  textTitle: contrasts?.grey125125,
+  textDescription: contrasts?.grey125125,
+  textBody: contrasts?.grey125125,
+  textTimestamp: contrasts?.grey5782,
+  textAuthor: contrasts?.grey5782,
+  textDatapoint: contrasts?.grey5782,
+  textLink: contrasts?.blue4570,
+  textPlaceholder: contrasts?.grey2424,
+  textSuccess: contrasts?.green4570,
+  textWarning: contrasts?.orange4570,
+  textError: contrasts?.red4570,
+
+  lineStroke: contrasts?.grey1424,
+  lineDivider: contrasts?.grey1214,
+
+  surfaceOverlayGrey: contrasts?.grey100100op75,
+  surfaceOverlayWhite: contrasts?.white1010op75,
+  surfaceDivider: contrasts?.grey1424
 })
 
-export default spacing
-export { spacing }
+export default getUIColors

package/tokens/canvas/scss/_variables.scss

@@ -1,55 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$instui-canvas-colors-brand: #0374B5;
-$instui-canvas-colors-link: #0374B5;
-$instui-canvas-colors-electric: #0374B5;
-$instui-canvas-colors-shamrock: #0B874B;
-$instui-canvas-colors-barney: #BF32A4;
-$instui-canvas-colors-crimson: #E0061F;
-$instui-canvas-colors-fire: #FC5E13;
-$instui-canvas-colors-licorice: #2D3B45;
-$instui-canvas-colors-oxford: #394B58;
-$instui-canvas-colors-ash: #6B7780;
-$instui-canvas-colors-slate: #8B969E;
-$instui-canvas-colors-tiara: #C7CDD1;
-$instui-canvas-colors-porcelain: #F5F5F5;
-$instui-canvas-colors-white: #FFFFFF;
-$instui-canvas-colors-text-darkest: #2D3B45;
-$instui-canvas-colors-text-dark: #6B7780;
-$instui-canvas-colors-text-light: #F5F5F5;
-$instui-canvas-colors-text-lightest: #FFFFFF;
-$instui-canvas-colors-text-brand: #0374B5;
-$instui-canvas-colors-text-link: #0374B5;
-$instui-canvas-colors-text-alert: #BF32A4;
-$instui-canvas-colors-text-info: #0374B5;
-$instui-canvas-colors-text-success: #0B874B;
-$instui-canvas-colors-text-danger: #E0061F;
-$instui-canvas-colors-text-warning: #FC5E13;
-$instui-canvas-colors-background-darkest: #2D3B45;
-$instui-canvas-colors-background-dark: #6B7780;
-$instui-canvas-colors-background-medium: #C7CDD1;
-$instui-canvas-colors-background-light: #F5F5F5;
-$instui-canvas-colors-background-lightest: #FFFFFF;
-$instui-canvas-colors-background-brand: #0374B5;
-$instui-canvas-colors-background-brand-secondary: #394B58;
-$instui-canvas-colors-background-alert: #BF32A4;
-$instui-canvas-colors-background-info: #0374B5;
-$instui-canvas-colors-background-success: #0B874B;
-$instui-canvas-colors-background-danger: #E0061F;
-$instui-canvas-colors-background-warning: #FC5E13;
-$instui-canvas-colors-border-lightest: #FFFFFF;
-$instui-canvas-colors-border-light: #F5F5F5;
-$instui-canvas-colors-border-medium: #C7CDD1;
-$instui-canvas-colors-border-dark: #6B7780;
-$instui-canvas-colors-border-darkest: #2D3B45;
-$instui-canvas-colors-border-brand: #0374B5;
-$instui-canvas-colors-border-alert: #BF32A4;
-$instui-canvas-colors-border-info: #0374B5;
-$instui-canvas-colors-border-success: #0B874B;
-$instui-canvas-colors-border-danger: #E0061F;
-$instui-canvas-colors-border-warning: #FC5E13;
-$instui-canvas-colors-border-debug: #E0061F;
 $instui-canvas-borders-radius-small: 0.125rem;
 $instui-canvas-borders-radius-medium: 0.25rem;
 $instui-canvas-borders-radius-large: 0.5rem;

package/tokens/canvas/source.json

@@ -1 +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}}}

package/tokens/canvas-high-contrast/scss/_variables.scss

@@ -1,55 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$instui-canvas-high-contrast-colors-brand: #0770A3;
-$instui-canvas-high-contrast-colors-link: #0770A3;
-$instui-canvas-high-contrast-colors-electric: #0770A3;
-$instui-canvas-high-contrast-colors-shamrock: #127A1B;
-$instui-canvas-high-contrast-colors-barney: #B8309E;
-$instui-canvas-high-contrast-colors-crimson: #D01A19;
-$instui-canvas-high-contrast-colors-fire: #C23C0D;
-$instui-canvas-high-contrast-colors-licorice: #2D3B45;
-$instui-canvas-high-contrast-colors-oxford: #394B58;
-$instui-canvas-high-contrast-colors-ash: #556572;
-$instui-canvas-high-contrast-colors-slate: #556572;
-$instui-canvas-high-contrast-colors-tiara: #556572;
-$instui-canvas-high-contrast-colors-porcelain: #FFFFFF;
-$instui-canvas-high-contrast-colors-white: #FFFFFF;
-$instui-canvas-high-contrast-colors-text-darkest: #2D3B45;
-$instui-canvas-high-contrast-colors-text-dark: #556572;
-$instui-canvas-high-contrast-colors-text-light: #FFFFFF;
-$instui-canvas-high-contrast-colors-text-lightest: #FFFFFF;
-$instui-canvas-high-contrast-colors-text-brand: #0770A3;
-$instui-canvas-high-contrast-colors-text-link: #0770A3;
-$instui-canvas-high-contrast-colors-text-alert: #B8309E;
-$instui-canvas-high-contrast-colors-text-info: #0770A3;
-$instui-canvas-high-contrast-colors-text-success: #127A1B;
-$instui-canvas-high-contrast-colors-text-danger: #D01A19;
-$instui-canvas-high-contrast-colors-text-warning: #C23C0D;
-$instui-canvas-high-contrast-colors-background-darkest: #2D3B45;
-$instui-canvas-high-contrast-colors-background-dark: #556572;
-$instui-canvas-high-contrast-colors-background-medium: #556572;
-$instui-canvas-high-contrast-colors-background-light: #FFFFFF;
-$instui-canvas-high-contrast-colors-background-lightest: #FFFFFF;
-$instui-canvas-high-contrast-colors-background-brand: #0770A3;
-$instui-canvas-high-contrast-colors-background-brand-secondary: #394B58;
-$instui-canvas-high-contrast-colors-background-alert: #B8309E;
-$instui-canvas-high-contrast-colors-background-info: #0770A3;
-$instui-canvas-high-contrast-colors-background-success: #127A1B;
-$instui-canvas-high-contrast-colors-background-danger: #D01A19;
-$instui-canvas-high-contrast-colors-background-warning: #C23C0D;
-$instui-canvas-high-contrast-colors-border-lightest: #FFFFFF;
-$instui-canvas-high-contrast-colors-border-light: #FFFFFF;
-$instui-canvas-high-contrast-colors-border-medium: #556572;
-$instui-canvas-high-contrast-colors-border-dark: #556572;
-$instui-canvas-high-contrast-colors-border-darkest: #2D3B45;
-$instui-canvas-high-contrast-colors-border-brand: #0770A3;
-$instui-canvas-high-contrast-colors-border-alert: #B8309E;
-$instui-canvas-high-contrast-colors-border-info: #0770A3;
-$instui-canvas-high-contrast-colors-border-success: #127A1B;
-$instui-canvas-high-contrast-colors-border-danger: #D01A19;
-$instui-canvas-high-contrast-colors-border-warning: #C23C0D;
-$instui-canvas-high-contrast-colors-border-debug: #D01A19;
 $instui-canvas-high-contrast-borders-radius-small: 0.125rem;
 $instui-canvas-high-contrast-borders-radius-medium: 0.25rem;
 $instui-canvas-high-contrast-borders-radius-large: 0.5rem;

package/tokens/canvas-high-contrast/source.json

@@ -1 +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}}}