@instructure/ui-themes 10.0.1-snapshot-14 → 10.2.0

package/src/sharedThemeTokens/colors/primitives.ts

@@ -0,0 +1,190 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Primitives, AdditionalPrimitives } from '@instructure/shared-types'
+
+export 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 const additionalPrimitives: AdditionalPrimitives = {
+  rose12: '#FEE4E4',
+  rose30: '#FB5D5D',
+  rose35: '#FA3F3F',
+  rose40: '#FA1A1A',
+  rose45: '#ED0000',
+  rose50: '#E00000',
+  rose57: '#CE0000',
+  rose70: '#B50000',
+  rose90: '#970000',
+  rose110: '#7F0000',
+
+  copper12: '#FFE5D3',
+  copper30: '#EE6D15',
+  copper35: '#DB6414',
+  copper40: '#CD5E12',
+  copper45: '#BF5811',
+  copper50: '#B45310',
+  copper57: '#A54C0F',
+  copper70: '#90420D',
+  copper90: '#77360B',
+  copper110: '#622D09',
+
+  honey12: '#F5E9CA',
+  honey30: '#C08A00',
+  honey35: '#A57600',
+  honey40: '#B07E00',
+  honey45: '#996E00',
+  honey50: '#916800',
+  honey57: '#856000',
+  honey70: '#745300',
+  honey90: '#5F4400',
+  honey110: '#4E3800',
+
+  forest12: '#DFEEE0',
+  forest30: '#55A459',
+  forest35: '#409945',
+  forest40: '#319135',
+  forest45: '#27872B',
+  forest50: '#248029',
+  forest57: '#217526',
+  forest70: '#1D6621',
+  forest90: '#18541B',
+  forest110: '#144516',
+
+  aurora12: '#DAEEE8',
+  aurora30: '#38A585',
+  aurora35: '#1E9975',
+  aurora40: '#0B9069',
+  aurora45: '#048660',
+  aurora50: '#047F5B',
+  aurora57: '#037453',
+  aurora70: '#036549',
+  aurora90: '#02533C',
+  aurora110: '#024531',
+
+  sea12: '#DAEEEF',
+  sea30: '#37A1AA',
+  sea35: '#1E95A0',
+  sea40: '#0A8C97',
+  sea45: '#00828E',
+  sea50: '#007B86',
+  sea57: '#00717B',
+  sea70: '#00626B',
+  sea90: '#005158',
+  sea110: '#004349',
+
+  sky12: '#DDECF3',
+  sky30: '#4E9CC0',
+  sky35: '#3890B8',
+  sky40: '#2887B2',
+  sky45: '#197EAB',
+  sky50: '#1777A2',
+  sky57: '#156D94',
+  sky70: '#135F81',
+  sky90: '#0F4E6A',
+  sky110: '#0D4058',
+
+  ocean12: '#DFEBFB',
+  ocean30: '#5694EB',
+  ocean35: '#4187E8',
+  ocean40: '#317DE6',
+  ocean45: '#2573DF',
+  ocean50: '#236DD3',
+  ocean57: '#2063C1',
+  ocean70: '#1C57A8',
+  ocean90: '#17478B',
+  ocean110: '#133B72',
+
+  violet12: '#F1E6F5',
+  violet30: '#B57FCC',
+  violet35: '#AC6FC6',
+  violet40: '#A564C2',
+  violet45: '#9E58BD',
+  violet50: '#994FB9',
+  violet57: '#9242B4',
+  violet70: '#7F399E',
+  violet90: '#682F82',
+  violet110: '#56276B',
+
+  plum12: '#F7E5F0',
+  plum30: '#D473B1',
+  plum35: '#CE60A7',
+  plum40: '#CA529F',
+  plum45: '#C54396',
+  plum50: '#C1368F',
+  plum57: '#BA2083',
+  plum70: '#A31C73',
+  plum90: '#87175F',
+  plum110: '#70134F',
+
+  stone12: '#EAEAEA',
+  stone30: '#939393',
+  stone35: '#878787',
+  stone40: '#7F7F7F',
+  stone45: '#767676',
+  stone50: '#6F6F6F',
+  stone57: '#666666',
+  stone70: '#585858',
+  stone90: '#494949',
+  stone110: '#3C3C3C'
+}

package/src/sharedThemeTokens/forms.ts

@@ -0,0 +1,34 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Forms } from '@instructure/shared-types'
+
+const forms: Forms = Object.freeze({
+  inputHeightSmall: '1.75rem',
+  inputHeightMedium: '2.375rem',
+  inputHeightLarge: '3rem'
+})
+
+export default forms
+export { forms }

package/src/sharedThemeTokens/index.ts

@@ -0,0 +1,48 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { borders } from './borders'
+import { transitions } from './transitions'
+import { typography } from './typography'
+import { spacing } from './spacing'
+import { forms } from './forms'
+import { media } from './media'
+import { breakpoints } from './breakpoints'
+import { shadows } from './shadows'
+import { stacking } from './stacking'
+
+const canvas = {
+  borders,
+  transitions,
+  typography,
+  spacing,
+  forms,
+  media,
+  breakpoints,
+  shadows,
+  stacking
+}
+
+export default canvas
+export { canvas }

package/src/sharedThemeTokens/media.ts

@@ -0,0 +1,35 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { breakpoints } from './breakpoints'
+import { Media } from '@instructure/shared-types'
+
+const media: Media = Object.freeze({
+  mediumMin: `min-width: ${breakpoints.medium}`,
+  largeMin: `min-width: ${breakpoints.large}`,
+  xLargeMin: `min-width: ${breakpoints.xLarge}`
+} as const)
+
+export default media
+export { media }

package/src/sharedThemeTokens/shadows.ts

@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Shadows } from '@instructure/shared-types'
+
+// use for consistent box shadows
+const values = [
+  '0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
+  '0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)',
+  '0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)'
+]
+
+const shadows: Shadows = Object.freeze({
+  depth1: values[0],
+  depth2: values[1],
+  depth3: values[2],
+
+  resting: values[0],
+  above: values[1],
+  topmost: values[2]
+} as const)
+
+export default shadows
+export { shadows }

package/src/sharedThemeTokens/spacing.ts

@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Spacing } from '@instructure/shared-types'
+
+const spacing: Spacing = Object.freeze({
+  xxxSmall: '0.125rem', // 2px
+  xxSmall: '0.375rem', // 6px
+  xSmall: '0.5rem', // 8px
+  small: '0.75rem', // 12px
+  mediumSmall: '1rem', // 16px
+  medium: '1.5rem', // 24px
+  large: '2.25rem', // 36px
+  xLarge: '3rem', // 48px
+  xxLarge: '3.75rem' // 60px
+} as const)
+
+export default spacing
+export { spacing }

package/src/sharedThemeTokens/stacking.ts

@@ -0,0 +1,34 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Stacking } from '@instructure/shared-types'
+
+const stacking: Stacking = Object.freeze({
+  topmost: 9999,
+  above: 1,
+  below: -1,
+  deepest: -9999
+} as const)
+export default stacking
+export { stacking }

package/src/sharedThemeTokens/transitions.ts

@@ -0,0 +1,33 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Transitions } from '@instructure/shared-types'
+
+const transitions: Transitions = Object.freeze({
+  duration: '300ms',
+  timing: 'ease-in-out'
+} as const)
+
+export default transitions
+export { transitions }

package/src/sharedThemeTokens/typography.ts

@@ -0,0 +1,53 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Typography } from '@instructure/shared-types'
+
+const typography: Typography = Object.freeze({
+  fontFamily: 'LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontFamilyMonospace: 'Menlo, Consolas, Monaco, "Andale Mono", monospace',
+
+  fontSizeXSmall: '0.75rem', // 12px
+  fontSizeSmall: '0.875rem', // 14px
+  fontSizeMedium: '1rem', // 16px
+  fontSizeLarge: '1.375rem', // 22px
+  fontSizeXLarge: '1.75rem', // 28px
+  fontSizeXXLarge: '2.375rem', // 38px
+
+  fontWeightLight: 300,
+  fontWeightNormal: 400,
+  fontWeightBold: 700,
+
+  lineHeight: 1.5, // 24px
+  lineHeightFit: 1.125,
+  lineHeightCondensed: 1.25,
+  lineHeightDouble: 2,
+
+  letterSpacingNormal: 0,
+  letterSpacingCondensed: '-0.0625rem',
+  letterSpacingExpanded: '0.0625rem'
+})
+
+export default typography
+export { typography }

package/src/themes/canvas/colors.ts

@@ -0,0 +1,76 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  primitives,
+  additionalPrimitives
+} from '../../sharedThemeTokens/colors/primitives'
+import dataVisualization from '../../sharedThemeTokens/colors/dataVisualization'
+import getUIColors from '../../utils/getUIColors'
+
+import type { 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 ui: UI = getUIColors(contrasts)
+
+const colors = {
+  primitives,
+  additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization
+}
+export default { primitives, contrasts, ui }
+export { colors }

package/src/themes/canvas/index.ts

@@ -0,0 +1,69 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import sharedThemeTokens from '../../sharedThemeTokens'
+import { ThemeRegistry } from '@instructure/theme-registry'
+import { BaseTheme, Colors } from '@instructure/shared-types'
+import colors from './colors'
+
+const key = 'canvas'
+
+const brandVariables = {
+  /* Defaults for Canvas account branding variables: */
+  'ic-brand-primary': colors?.contrasts?.blue4570,
+  'ic-brand-font-color-dark': colors?.contrasts?.grey125125,
+
+  'ic-link-color': colors?.contrasts?.blue4570,
+  'ic-link-decoration': 'none',
+
+  'ic-brand-button--primary-bgd': colors?.contrasts?.blue4570,
+  'ic-brand-button--primary-text': colors?.contrasts?.white1010,
+  'ic-brand-button--secondary-bgd': colors?.contrasts?.grey125125,
+  'ic-brand-button--secondary-text': colors?.contrasts?.white1010,
+
+  'ic-brand-global-nav-bgd': colors?.contrasts?.grey100100,
+  'ic-global-nav-link-hover': colors?.contrasts?.grey125125,
+  'ic-brand-global-nav-ic-icon-svg-fill': colors?.contrasts?.white1010,
+  'ic-brand-global-nav-ic-icon-svg-fill--active': colors?.contrasts?.blue4570,
+  'ic-brand-global-nav-menu-item__text-color': colors?.contrasts?.white1010,
+  'ic-brand-global-nav-menu-item__text-color--active':
+    colors?.contrasts?.blue4570
+}
+
+export type CanvasBrandVariables = typeof brandVariables
+
+export type CanvasTheme = BaseTheme & {
+  key: 'canvas'
+} & typeof sharedThemeTokens & { colors: Colors } & CanvasBrandVariables
+
+const __theme: CanvasTheme = {
+  key,
+  ...sharedThemeTokens,
+  colors,
+  ...brandVariables
+}
+
+const theme = ThemeRegistry.registerTheme(__theme)
+
+export default theme