@instructure/ui-themes 10.0.1-snapshot-13 → 10.1.1-snapshot-4973

package/CHANGELOG.md

@@ -3,9 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.0.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-13) (2024-08-21)
+## [10.1.1-snapshot-4973](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.1.1-snapshot-4973) (2024-08-23)
 
-**Note:** Version bump only for package @instructure/ui-themes
+
+### Features
+
+* **many:** add data visualization colors, refactor theme code ([c395e17](https://github.com/instructure/instructure-ui/commit/c395e17a43be9fd7ec9d6854f28ae8584c3667bc))
+
+
+
+
+
+# [10.1.0](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.1.0) (2024-08-23)
+
+
+### Features
+
+* **many:** add data visualization colors, refactor theme code ([c395e17](https://github.com/instructure/instructure-ui/commit/c395e17a43be9fd7ec9d6854f28ae8584c3667bc))
 
 
 

package/README.md

@@ -21,7 +21,7 @@ npm install @instructure/ui-themes
 - global theming:
 
   ```js
-  import { canvas } from '@instructure/ui-themes'
+  import canvas from '@instructure/ui-themes'
 
   canvas.use()
   ```
@@ -29,7 +29,7 @@ npm install @instructure/ui-themes
 - application level theming:
 
   ```jsx
-  import { canvas } from '@instructure/ui-themes'
+  import canvas from '@instructure/ui-themes'
 
   ReactDOM.render(
     <InstUISettingsProvider theme={canvas}>
@@ -44,7 +44,7 @@ npm install @instructure/ui-themes
 - globally:
 
   ```js
-  import { canvas } from '@instructure/ui-themes'
+  import canvas from '@instructure/ui-themes'
 
   canvas.use({ overrides: { colors: { brand: 'red' } } })
   ```
@@ -52,7 +52,7 @@ npm install @instructure/ui-themes
 - application level:
 
   ```jsx
-  import { canvas } from '@instructure/ui-themes'
+  import canvas from '@instructure/ui-themes'
   const themeOverrides = { colors: { brand: 'red' } }
 
   ReactDOM.render(

package/es/index.js

@@ -22,7 +22,9 @@
  * SOFTWARE.
  */
 
-import { theme as canvasHighContrast } from '@instructure/canvas-high-contrast-theme';
-import { theme as canvas } from '@instructure/canvas-theme';
-export { canvas, canvasHighContrast };
+import canvasHighContrast from './themes/canvasHighContrast';
+import canvas from './themes/canvas';
+import { primitives, additionalPrimitives } from './sharedThemeTokens/colors/primitives';
+import dataVisualization from './sharedThemeTokens/colors/dataVisualization';
+export { canvas, canvasHighContrast, primitives, additionalPrimitives, dataVisualization };
 export default canvas;

package/es/sharedThemeTokens/borders.js

@@ -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.
+ */
+
+// use for consistency between buttons, text inputs, etc.
+
+const borders = Object.freeze({
+  radiusSmall: '0.125rem',
+  // 2px
+  radiusMedium: '0.25rem',
+  // 4px
+  radiusLarge: '0.5rem',
+  // 8px
+
+  widthSmall: '0.0625rem',
+  // 1px
+  widthMedium: '0.125rem',
+  // 2px
+  widthLarge: '0.25rem',
+  // 4px
+
+  style: 'solid'
+});
+export default borders;
+export { borders };

package/es/sharedThemeTokens/breakpoints.js

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+const onePixel = 0.0625;
+
+// base = 16px
+const values = {
+  xxSmall: 8,
+  // 128px
+  xSmall: 16,
+  // 256px
+  small: 30,
+  // 480px
+  medium: 48,
+  // 768px
+  tablet: 48,
+  // 768px
+  large: 62,
+  // 992px
+  desktop: 64,
+  // 1024px
+  xLarge: 75 // 1200px
+};
+const breakpoints = Object.freeze({
+  xxSmall: `${values.xxSmall}em`,
+  xSmall: `${values.xSmall}em`,
+  small: `${values.small}em`,
+  medium: `${values.medium}em`,
+  tablet: `${values.tablet}em`,
+  large: `${values.large}em`,
+  desktop: `${values.desktop}em`,
+  xLarge: `${values.xLarge}em`,
+  maxWidth: `${values.large - onePixel}em`
+});
+export default breakpoints;
+export { breakpoints };

package/es/sharedThemeTokens/colors/dataVisualization.js

@@ -0,0 +1,138 @@
+/*
+ * 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 { additionalPrimitives } from './primitives';
+const dataVisualization = {
+  rose12Primary: additionalPrimitives.rose12,
+  rose30Primary: additionalPrimitives.rose30,
+  rose45Primary: additionalPrimitives.rose45,
+  rose70Primary: additionalPrimitives.rose70,
+  rose110Primary: additionalPrimitives.rose110,
+  rose35Secondary: additionalPrimitives.rose35,
+  rose40Secondary: additionalPrimitives.rose40,
+  rose50Secondary: additionalPrimitives.rose50,
+  rose57Secondary: additionalPrimitives.rose57,
+  rose90Secondary: additionalPrimitives.rose90,
+  copper12Primary: additionalPrimitives.copper12,
+  copper30Primary: additionalPrimitives.copper30,
+  copper45Primary: additionalPrimitives.copper45,
+  copper70Primary: additionalPrimitives.copper70,
+  copper110Primary: additionalPrimitives.copper110,
+  copper35Secondary: additionalPrimitives.copper35,
+  copper40Secondary: additionalPrimitives.copper40,
+  copper50Secondary: additionalPrimitives.copper50,
+  copper57Secondary: additionalPrimitives.copper57,
+  copper90Secondary: additionalPrimitives.copper90,
+  honey12Primary: additionalPrimitives.honey12,
+  honey30Primary: additionalPrimitives.honey30,
+  honey45Primary: additionalPrimitives.honey45,
+  honey70Primary: additionalPrimitives.honey70,
+  honey110Primary: additionalPrimitives.honey110,
+  honey35Secondary: additionalPrimitives.honey35,
+  honey40Secondary: additionalPrimitives.honey40,
+  honey50Secondary: additionalPrimitives.honey50,
+  honey57Secondary: additionalPrimitives.honey57,
+  honey90Secondary: additionalPrimitives.honey90,
+  forest12Primary: additionalPrimitives.forest12,
+  forest30Primary: additionalPrimitives.forest30,
+  forest45Primary: additionalPrimitives.forest45,
+  forest70Primary: additionalPrimitives.forest70,
+  forest110Primary: additionalPrimitives.forest110,
+  forest35Secondary: additionalPrimitives.forest35,
+  forest40Secondary: additionalPrimitives.forest40,
+  forest50Secondary: additionalPrimitives.forest50,
+  forest57Secondary: additionalPrimitives.forest57,
+  forest90Secondary: additionalPrimitives.forest90,
+  aurora12Primary: additionalPrimitives.aurora12,
+  aurora30Primary: additionalPrimitives.aurora30,
+  aurora45Primary: additionalPrimitives.aurora45,
+  aurora70Primary: additionalPrimitives.aurora70,
+  aurora110Primary: additionalPrimitives.aurora110,
+  aurora35Secondary: additionalPrimitives.aurora35,
+  aurora40Secondary: additionalPrimitives.aurora40,
+  aurora50Secondary: additionalPrimitives.aurora50,
+  aurora57Secondary: additionalPrimitives.aurora57,
+  aurora90Secondary: additionalPrimitives.aurora90,
+  sea12Primary: additionalPrimitives.sea12,
+  sea30Primary: additionalPrimitives.sea30,
+  sea45Primary: additionalPrimitives.sea45,
+  sea70Primary: additionalPrimitives.sea70,
+  sea110Primary: additionalPrimitives.sea110,
+  sea35Secondary: additionalPrimitives.sea35,
+  sea40Secondary: additionalPrimitives.sea40,
+  sea50Secondary: additionalPrimitives.sea50,
+  sea57Secondary: additionalPrimitives.sea57,
+  sea90Secondary: additionalPrimitives.sea90,
+  sky12Primary: additionalPrimitives.sky12,
+  sky30Primary: additionalPrimitives.sky30,
+  sky45Primary: additionalPrimitives.sky45,
+  sky70Primary: additionalPrimitives.sky70,
+  sky110Primary: additionalPrimitives.sky110,
+  sky35Secondary: additionalPrimitives.sky35,
+  sky40Secondary: additionalPrimitives.sky40,
+  sky50Secondary: additionalPrimitives.sky50,
+  sky57Secondary: additionalPrimitives.sky57,
+  sky90Secondary: additionalPrimitives.sky90,
+  ocean12Primary: additionalPrimitives.ocean12,
+  ocean30Primary: additionalPrimitives.ocean30,
+  ocean45Primary: additionalPrimitives.ocean45,
+  ocean70Primary: additionalPrimitives.ocean70,
+  ocean110Primary: additionalPrimitives.ocean110,
+  ocean35Secondary: additionalPrimitives.ocean35,
+  ocean40Secondary: additionalPrimitives.ocean40,
+  ocean50Secondary: additionalPrimitives.ocean50,
+  ocean57Secondary: additionalPrimitives.ocean57,
+  ocean90Secondary: additionalPrimitives.ocean90,
+  violet12Primary: additionalPrimitives.violet12,
+  violet30Primary: additionalPrimitives.violet30,
+  violet45Primary: additionalPrimitives.violet45,
+  violet70Primary: additionalPrimitives.violet70,
+  violet110Primary: additionalPrimitives.violet110,
+  violet35Secondary: additionalPrimitives.violet35,
+  violet40Secondary: additionalPrimitives.violet40,
+  violet50Secondary: additionalPrimitives.violet50,
+  violet57Secondary: additionalPrimitives.violet57,
+  violet90Secondary: additionalPrimitives.violet90,
+  plum12Primary: additionalPrimitives.plum12,
+  plum30Primary: additionalPrimitives.plum30,
+  plum45Primary: additionalPrimitives.plum45,
+  plum70Primary: additionalPrimitives.plum70,
+  plum110Primary: additionalPrimitives.plum110,
+  plum35Secondary: additionalPrimitives.plum35,
+  plum40Secondary: additionalPrimitives.plum40,
+  plum50Secondary: additionalPrimitives.plum50,
+  plum57Secondary: additionalPrimitives.plum57,
+  plum90Secondary: additionalPrimitives.plum90,
+  stone12Primary: additionalPrimitives.stone12,
+  stone30Primary: additionalPrimitives.stone30,
+  stone45Primary: additionalPrimitives.stone45,
+  stone70Primary: additionalPrimitives.stone70,
+  stone110Primary: additionalPrimitives.stone110,
+  stone35Secondary: additionalPrimitives.stone35,
+  stone40Secondary: additionalPrimitives.stone40,
+  stone50Secondary: additionalPrimitives.stone50,
+  stone57Secondary: additionalPrimitives.stone57,
+  stone90Secondary: additionalPrimitives.stone90
+};
+export default dataVisualization;

package/es/sharedThemeTokens/colors/primitives.js

@@ -0,0 +1,172 @@
+/*
+ * 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.
+ */
+
+export const 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 = {
+  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/es/sharedThemeTokens/forms.js

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+const forms = Object.freeze({
+  inputHeightSmall: '1.75rem',
+  inputHeightMedium: '2.375rem',
+  inputHeightLarge: '3rem'
+});
+export default forms;
+export { forms };

package/es/sharedThemeTokens/index.js

@@ -0,0 +1,46 @@
+/*
+ * 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/es/sharedThemeTokens/media.js

@@ -0,0 +1,32 @@
+/*
+ * 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';
+const media = Object.freeze({
+  mediumMin: `min-width: ${breakpoints.medium}`,
+  largeMin: `min-width: ${breakpoints.large}`,
+  xLargeMin: `min-width: ${breakpoints.xLarge}`
+});
+export default media;
+export { media };

package/es/sharedThemeTokens/shadows.js

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+// 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 = Object.freeze({
+  depth1: values[0],
+  depth2: values[1],
+  depth3: values[2],
+  resting: values[0],
+  above: values[1],
+  topmost: values[2]
+});
+export default shadows;
+export { shadows };

package/es/sharedThemeTokens/spacing.js

@@ -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.
+ */
+
+const 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
+});
+export default spacing;
+export { spacing };