diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx index af441b046d..b720a9908d 100644 --- a/packages/__docs__/src/App/index.tsx +++ b/packages/__docs__/src/App/index.tsx @@ -30,22 +30,22 @@ import React, { createRef } from 'react' -import { Alert } from '@instructure/ui-alerts' +import { Alert } from '@instructure/ui-alerts/latest' import { InstUISettingsProvider, Global } from '@instructure/emotion' -import { Flex } from '@instructure/ui-flex' -import { Text } from '@instructure/ui-text' -import { View } from '@instructure/ui-view' +import { Flex } from '@instructure/ui-flex/latest' +import { Text } from '@instructure/ui-text/latest' +import { View } from '@instructure/ui-view/latest' import { AccessibleContent } from '@instructure/ui-a11y-content' -import { Mask } from '@instructure/ui-overlays' -import { IconButton } from '@instructure/ui-buttons' -import { Tray } from '@instructure/ui-tray' -import { Link } from '@instructure/ui-link' -import { addMediaQueryMatchListener } from '@instructure/ui-responsive' -import type { QueriesMatching } from '@instructure/ui-responsive' +import { Mask } from '@instructure/ui-overlays/latest' +import { IconButton } from '@instructure/ui-buttons/latest' +import { Tray } from '@instructure/ui-tray/latest' +import { Link } from '@instructure/ui-link/latest' +import { addMediaQueryMatchListener } from '@instructure/ui-responsive/latest' +import type { QueriesMatching } from '@instructure/ui-responsive/latest' import { - IconHamburgerSolid, - IconHeartLine, - IconXSolid + MenuInstUIIcon, + HeartInstUIIcon, + XInstUIIcon } from '@instructure/ui-icons' import { withStyleForDocs } from '../withStyleForDocs' @@ -77,7 +77,6 @@ import { } from '../navigationUtils' import generateStyle from './styles' -import generateComponentTheme from './theme' import { LoadingScreen } from '../LoadingScreen' import { getComponentsForVersion } from '../../versioned-components' import { updateGlobalsForVersion } from '../../globals' @@ -93,7 +92,7 @@ import type { BaseTheme } from '@instructure/shared-types' import { FocusRegion } from '@instructure/ui-a11y-utils' import { AppContext } from '../appContext' -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class App extends Component { static displayName = 'App' static contextType = AppContext @@ -172,9 +171,15 @@ class App extends Component { return fetch(url, { signal }) .then((response) => response.json()) .then((docsData) => { + const showNewThemes = this.state.selectedMinorVersion !== 'v11_6' + const themeKeys = Object.keys(docsData.themes).filter((key) => + showNewThemes + ? key !== 'shared-tokens' && !key.startsWith('legacy-') + : key.startsWith('legacy-') + ) this.setState({ docsData, - themeKey: Object.keys(docsData.themes)[0] + themeKey: themeKeys[0] }) }) } @@ -630,10 +635,14 @@ class App extends Component { return themeKeys.length > 1 ? ( {showMinorVersionSelect && ( @@ -679,7 +688,7 @@ class App extends Component { if (!window.location.pathname.includes('v11_6')) return null const v11_7Href = window.location.pathname.replace('v11_6', 'v11_7') return ( - + {subject} is designed for components for v11.7 and later.{' '} { - + Theme: {themeKey} {isNewThemePage && this.renderNewThemePageAlert()} @@ -732,10 +743,12 @@ class App extends Component { - + Icons @@ -753,7 +766,9 @@ class App extends Component { @@ -796,7 +811,7 @@ class App extends Component { } }) return ( - + ) @@ -816,11 +831,11 @@ class App extends Component { const heading = currentData.extension !== '.md' ? currentData.title : '' const isGuidePage = currentData.extension === '.md' const documentContent = ( - + {this.renderThemeSelect()} {isGuidePage && (currentData.id as string) !== 'legacy-theme-overrides' && ( - + This page is made for the latest version ( {this.getLatestMinorVersion()?.replace('_', '.')}) of InstUI.{' '} { ) const padding: Spacing = - layout === 'small' ? 'large small large small' : 'large' + layout === 'small' + ? 'general.space2xl general.spaceMd general.space2xl general.spaceMd' + : 'large' return this.renderWrappedContent(documentContent, padding) } @@ -908,7 +925,7 @@ class App extends Component { } }) return ( - + ) @@ -943,7 +960,7 @@ class App extends Component { renderError() { const errorContent = ( - + Document not found. Please use the search in the navigation to find any page in this documentation. @@ -1036,7 +1053,11 @@ class App extends Component { renderFooter() { const author = 'Instructure, Inc. Engineering and Product Design' return ( - + { size="small" lineHeight="fit" > - Made with by {author}. + Made with by{' '} + {author}. @@ -1063,14 +1085,18 @@ class App extends Component { const navContent = ( - + { return versionInPath ? (
{ variant="warning" transition="none" margin="none" + hasShadow={false} renderCloseButtonLabel="Close" themeOverride={{ background: '#BF32A4', color: 'white', borderRadius: '0rem', warningBorderColor: '#BF32A4', - warningIconBackground: '#BF32A4', - boxShadow: 'none' + warningIconBackground: '#BF32A4' }} > You are currently viewing the documentation of an older version of @@ -1164,7 +1190,7 @@ class App extends Component { css={this.props.styles?.skipToMainButton} borderRadius="small" display="inline-block" - padding="small" + padding="general.spaceMd" background="primary" elementRef={this.skipToMainButtonRef} > @@ -1210,7 +1236,7 @@ class App extends Component { }} onClick={this.handleMenuOpen} elementRef={this.handleMenuTriggerRef} - renderIcon={IconHamburgerSolid} + renderIcon={MenuInstUIIcon} screenReaderLabel="Open Navigation" shape="circle" aria-expanded={false} diff --git a/packages/__docs__/src/App/props.ts b/packages/__docs__/src/App/props.ts index 01ffd983bd..b45088eefe 100644 --- a/packages/__docs__/src/App/props.ts +++ b/packages/__docs__/src/App/props.ts @@ -33,7 +33,7 @@ import type { DocDataType } from '../Document/props' import type { Theme } from '@instructure/ui-themes' import type { ThemeVariables } from '@instructure/shared-types' -type AppProps = WithStyleProps +type AppProps = WithStyleProps type AppStyle = ComponentStyle< | 'app' @@ -45,26 +45,6 @@ type AppStyle = ComponentStyle< | 'skipToMainButton' > -type AppTheme = { - background: string - color: string - fontFamily: string - fontFamilyMonospace: string - lineHeight: string | number - fontWeight: number - codeBorderRadius: string | 0 - codeBackground: string - shadow: string - quotePadding: string - quoteMargin: string - borderWidth: string | 0 - borderStyle: string - borderColor: string - menuToggleZIndex: number - navBorderColor: string - navBorderWidth: string | 0 -} - type LayoutSize = 'small' | 'medium' | 'large' type AppState = { @@ -103,4 +83,4 @@ type DocData = ProcessedFile & { children: DocDataType[] } -export type { AppProps, AppState, DocData, LayoutSize, AppStyle, AppTheme } +export type { AppProps, AppState, DocData, LayoutSize, AppStyle } diff --git a/packages/__docs__/src/App/styles.ts b/packages/__docs__/src/App/styles.ts index e6787d5b63..e4fcf6d9c6 100644 --- a/packages/__docs__/src/App/styles.ts +++ b/packages/__docs__/src/App/styles.ts @@ -22,19 +22,23 @@ * SOFTWARE. */ -import type { AppStyle, AppTheme } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import type { AppStyle } from './props' /** * --- * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -const generateStyle = (componentTheme: AppTheme): AppStyle => { +const generateStyle = ( + _props: unknown, + { semantics }: DocsTokens +): AppStyle => { + const { spaceSm, spaceXl } = semantics.spacing return { app: { label: 'app', @@ -62,7 +66,7 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => { hamburger: { label: 'app__hamburger', position: 'fixed', - zIndex: componentTheme.menuToggleZIndex, + zIndex: 1, top: '1.25rem', insetInlineStart: '0.75rem' }, @@ -72,8 +76,8 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => { overflowX: 'hidden', minHeight: '100%', flexShrink: 0, - borderInlineEndColor: componentTheme.navBorderColor, - borderInlineEndWidth: componentTheme.navBorderWidth, + borderInlineEndColor: semantics.color.stroke.muted, + borderInlineEndWidth: semantics.borderWidth.sm, borderInlineEndStyle: 'solid' }, skipToMainButton: { @@ -100,16 +104,16 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => { height: '100%', overflow: 'hidden', margin: 0, - color: componentTheme.color, - fontFamily: componentTheme.fontFamily, - lineHeight: componentTheme.lineHeight, - fontWeight: componentTheme.fontWeight, - background: componentTheme.background + color: semantics.color.text.base, + fontFamily: semantics.fontFamily.base, + lineHeight: semantics.lineHeight.paragraph.base, + fontWeight: semantics.fontWeight.body.base, + background: semantics.color.background.container }, code: { - fontFamily: componentTheme.fontFamilyMonospace, - backgroundColor: componentTheme.codeBackground, - borderRadius: componentTheme.codeBorderRadius, + fontFamily: semantics.fontFamily.code, + backgroundColor: '#eee', + borderRadius: semantics.borderRadius.xs, padding: '0.125em' }, 'code[class^="lang-"]': { @@ -125,11 +129,15 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => { }, blockquote: { display: 'block', - background: componentTheme.background, - padding: componentTheme.quotePadding, - margin: componentTheme.quoteMargin, - borderTop: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`, - borderBottom: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}` + background: semantics.color.background.container, + padding: `${spaceSm} ${spaceXl}`, + margin: `2.25rem ${spaceXl}`, + borderTop: `${semantics.borderWidth.lg} ${'solid'} ${ + semantics.color.stroke.muted + }`, + borderBottom: `${semantics.borderWidth.lg} ${'solid'} ${ + semantics.color.stroke.muted + }` } } } diff --git a/packages/__docs__/src/App/theme.ts b/packages/__docs__/src/App/theme.ts deleted file mode 100644 index fd7d256e91..0000000000 --- a/packages/__docs__/src/App/theme.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' -import type { AppTheme } from './props' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): AppTheme => { - const { spacing, borders, colors, stacking, shadows, typography } = theme - - const componentVariables = { - background: colors?.contrasts?.white1010, - color: colors?.contrasts?.grey125125, - fontFamily: typography?.fontFamily, - fontFamilyMonospace: typography?.fontFamilyMonospace, - lineHeight: typography?.lineHeight, - fontWeight: typography?.fontWeightNormal, - codeBorderRadius: borders?.radiusSmall, - codeBackground: '#eee', - shadow: shadows?.resting, - quotePadding: `${spacing?.xSmall} ${spacing?.medium}`, - quoteMargin: `${spacing?.large} ${spacing?.medium}`, - borderWidth: borders?.widthLarge, - borderStyle: borders?.style, - borderColor: colors?.contrasts?.grey1111, - menuToggleZIndex: stacking?.above, - navBorderColor: colors?.contrasts?.grey1214, - navBorderWidth: borders?.widthSmall - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/CodeSandboxButton/index.tsx b/packages/__docs__/src/CodeSandboxButton/index.tsx index 3d1461e20f..0677e1b9c8 100644 --- a/packages/__docs__/src/CodeSandboxButton/index.tsx +++ b/packages/__docs__/src/CodeSandboxButton/index.tsx @@ -25,10 +25,10 @@ import { Component } from 'react' import { getParameters } from 'codesandbox-import-utils/lib/api/define' -import { Tooltip } from '@instructure/ui-tooltip' +import { Tooltip } from '@instructure/ui-tooltip/latest' import { SVGIcon } from '@instructure/ui-svg-images' -import { IconButton } from '@instructure/ui-buttons' +import { IconButton } from '@instructure/ui-buttons/latest' import { allowedProps } from './props' import type { CodeSandboxButtonProps } from './props' diff --git a/packages/__docs__/src/ColorBand/index.tsx b/packages/__docs__/src/ColorBand/index.tsx index 605a2cd0e9..1f6dfa9de5 100644 --- a/packages/__docs__/src/ColorBand/index.tsx +++ b/packages/__docs__/src/ColorBand/index.tsx @@ -24,16 +24,15 @@ import { Component } from 'react' -import { Flex } from '@instructure/ui-flex' -import { View } from '@instructure/ui-view' +import { Flex } from '@instructure/ui-flex/latest' +import { View } from '@instructure/ui-view/latest' import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { ColorBandProps } from './props' -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class ColorBand extends Component { static displayName = 'ColorBand' static allowedProps = allowedProps diff --git a/packages/__docs__/src/ColorBand/props.ts b/packages/__docs__/src/ColorBand/props.ts index 2c0322d839..3ac9083928 100644 --- a/packages/__docs__/src/ColorBand/props.ts +++ b/packages/__docs__/src/ColorBand/props.ts @@ -28,16 +28,10 @@ type ColorBandOwnProps = { } type PropKeys = keyof ColorBandOwnProps type AllowedPropKeys = Readonly> -type ColorBandProps = ColorBandOwnProps & - WithStyleProps +type ColorBandProps = ColorBandOwnProps & WithStyleProps const allowedProps: AllowedPropKeys = ['height'] type ColorBandStyle = ComponentStyle<'band1' | 'band2' | 'band3'> -type ColorBandTheme = { - colorAlert: string - colorWarning: string - colorDanger: string -} -export type { ColorBandProps, ColorBandStyle, ColorBandTheme } +export type { ColorBandProps, ColorBandStyle } export { allowedProps } diff --git a/packages/__docs__/src/ColorBand/styles.ts b/packages/__docs__/src/ColorBand/styles.ts index 0f59e86824..85c3d7ae5c 100644 --- a/packages/__docs__/src/ColorBand/styles.ts +++ b/packages/__docs__/src/ColorBand/styles.ts @@ -21,16 +21,19 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { ColorBandStyle, ColorBandTheme } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import type { ColorBandProps, ColorBandStyle } from './props' /** * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -const generateStyle = (componentTheme: ColorBandTheme): ColorBandStyle => { +const generateStyle = ( + _props: ColorBandProps, + { sharedTokens }: DocsTokens +): ColorBandStyle => { const commonStyles = { display: 'block', height: '100%' @@ -40,17 +43,17 @@ const generateStyle = (componentTheme: ColorBandTheme): ColorBandStyle => { band1: { label: 'colorBand__1', ...commonStyles, - background: componentTheme.colorAlert + background: sharedTokens.background.infoColor }, band2: { label: 'colorBand__2', ...commonStyles, - background: componentTheme.colorWarning + background: sharedTokens.background.warningColor }, band3: { label: 'colorBand__3', ...commonStyles, - background: componentTheme.colorDanger + background: sharedTokens.background.errorColor } } } diff --git a/packages/__docs__/src/ColorBand/theme.ts b/packages/__docs__/src/ColorBand/theme.ts deleted file mode 100644 index 93a14cdfe8..0000000000 --- a/packages/__docs__/src/ColorBand/theme.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' -import { ColorBandTheme } from './props' -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): ColorBandTheme => { - const { colors } = theme - - const componentVariables = { - colorAlert: colors?.contrasts?.blue4570, - colorWarning: colors?.contrasts?.orange4570, - colorDanger: colors?.contrasts?.red4570 - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/ColorCard/index.tsx b/packages/__docs__/src/ColorCard/index.tsx index 8046589237..94c6edc665 100644 --- a/packages/__docs__/src/ColorCard/index.tsx +++ b/packages/__docs__/src/ColorCard/index.tsx @@ -24,8 +24,8 @@ import { Component } from 'react' -import { Text } from '@instructure/ui-text' -import { View } from '@instructure/ui-view' +import { Text } from '@instructure/ui-text/latest' +import { View } from '@instructure/ui-view/latest' import { ColorName } from '../ColorName' import type { ColorCardProps } from './props' import { allowedProps } from './props' @@ -89,7 +89,7 @@ class ColorCard extends Component { shadow="above" display="block" margin="0" - padding="small" + padding="general.spaceMd" >
{ static displayName = 'ColorSwatch' static allowedProps = allowedProps diff --git a/packages/__docs__/src/ColorSwatch/props.ts b/packages/__docs__/src/ColorSwatch/props.ts index f86349d783..0c8577f60d 100644 --- a/packages/__docs__/src/ColorSwatch/props.ts +++ b/packages/__docs__/src/ColorSwatch/props.ts @@ -30,12 +30,9 @@ type ColorSwatchOwnProps = { type PropKeys = keyof ColorSwatchOwnProps type AllowedPropKeys = Readonly> type ColorSwatchProps = ColorSwatchOwnProps & - WithStyleProps + WithStyleProps const allowedProps: AllowedPropKeys = ['color'] -type ColorSwatchTheme = { - borderColor: string -} export type ColorSwatchStyle = ComponentStyle<'colorSwatch'> -export type { ColorSwatchProps, ColorSwatchTheme } +export type { ColorSwatchProps } export { allowedProps } diff --git a/packages/__docs__/src/ColorSwatch/styles.ts b/packages/__docs__/src/ColorSwatch/styles.ts index 7f3700d6c5..2d105ef4dc 100644 --- a/packages/__docs__/src/ColorSwatch/styles.ts +++ b/packages/__docs__/src/ColorSwatch/styles.ts @@ -22,16 +22,19 @@ * SOFTWARE. */ -import { ColorSwatchTheme, ColorSwatchStyle } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import { ColorSwatchProps, ColorSwatchStyle } from './props' /** * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -const generateStyle = (componentTheme: ColorSwatchTheme): ColorSwatchStyle => { +const generateStyle = ( + _props: ColorSwatchProps, + { sharedTokens }: DocsTokens +): ColorSwatchStyle => { return { colorSwatch: { label: 'colorSwatch', @@ -41,7 +44,7 @@ const generateStyle = (componentTheme: ColorSwatchTheme): ColorSwatchStyle => { verticalAlign: 'middle', marginInlineEnd: 0, marginInlineStart: 0, - border: `1px solid ${componentTheme.borderColor}`, + border: `1px solid ${sharedTokens.stroke.strongColor}`, borderRadius: '3px' } } diff --git a/packages/__docs__/src/ColorSwatch/theme.ts b/packages/__docs__/src/ColorSwatch/theme.ts deleted file mode 100644 index 6fabb4b0d5..0000000000 --- a/packages/__docs__/src/ColorSwatch/theme.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' -import { ColorSwatchTheme } from './props' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): ColorSwatchTheme => { - const { colors } = theme - - const componentVariables = { - borderColor: colors?.contrasts?.grey4570 - } - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/ColorTable/index.tsx b/packages/__docs__/src/ColorTable/index.tsx index 45ee6bbd5a..f357ef189c 100644 --- a/packages/__docs__/src/ColorTable/index.tsx +++ b/packages/__docs__/src/ColorTable/index.tsx @@ -25,8 +25,8 @@ import { Component } from 'react' import { Heading } from '../Heading' -import { Table } from '@instructure/ui-table' -import { View } from '@instructure/ui-view' +import { Table } from '@instructure/ui-table/latest' +import { View } from '@instructure/ui-view/latest' import { ColorSwatch } from '../ColorSwatch' import { ColorTableProps } from './props' @@ -46,7 +46,7 @@ class ColorTable extends Component { {key} - + @@ -63,8 +63,8 @@ class ColorTable extends Component { render() { const headingElement = 'h3' const headingLevel = 'h2' - const margin = 'small none large' - const padding = 'small' + const margin = 'general.spaceMd none general.space2xl' + const padding = 'general.spaceMd' const label = 'name' + 'variables' return ( @@ -76,7 +76,7 @@ class ColorTable extends Component { margin={margin} borderRadius="medium" > - +
label} layout="fixed"> diff --git a/packages/__docs__/src/ComponentTheme/index.tsx b/packages/__docs__/src/ComponentTheme/index.tsx index 3a0f00405f..326d14f67a 100644 --- a/packages/__docs__/src/ComponentTheme/index.tsx +++ b/packages/__docs__/src/ComponentTheme/index.tsx @@ -24,9 +24,9 @@ import { Component } from 'react' -import { withStyleForDocs as withStyleNew } from '../withStyleForDocs' -import { Table } from '@instructure/ui-table' -import { View } from '@instructure/ui-view' +import { withStyleForDocs } from '../withStyleForDocs' +import { Table } from '@instructure/ui-table/latest' +import { View } from '@instructure/ui-view/latest' import { ColorSwatch } from '../ColorSwatch' @@ -36,7 +36,7 @@ import type { ComponentThemeProps } from './props' type ThemeEntry = { name: string; value: string | number } -@withStyleNew(generateStyle, null) +@withStyleForDocs(generateStyle) class ComponentTheme extends Component { static displayName = 'ComponentTheme' static allowedProps = allowedProps @@ -51,7 +51,7 @@ class ComponentTheme extends Component { ) { return ( - + {value} @@ -108,7 +108,7 @@ class ComponentTheme extends Component { return componentTheme && Object.keys(componentTheme).length > 0 ? (
-
+
'Component theme'}> Name diff --git a/packages/__docs__/src/ComponentTheme/styles.ts b/packages/__docs__/src/ComponentTheme/styles.ts index 33a5de4877..3e31bf227a 100644 --- a/packages/__docs__/src/ComponentTheme/styles.ts +++ b/packages/__docs__/src/ComponentTheme/styles.ts @@ -24,9 +24,8 @@ import type { ComponentThemeStyle } from './props' /** * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ const generateStyle = (): ComponentThemeStyle => { diff --git a/packages/__docs__/src/ContentWrap/index.tsx b/packages/__docs__/src/ContentWrap/index.tsx index ab3126dff7..051c6e1042 100644 --- a/packages/__docs__/src/ContentWrap/index.tsx +++ b/packages/__docs__/src/ContentWrap/index.tsx @@ -24,7 +24,7 @@ import { Component } from 'react' -import { View } from '@instructure/ui-view' +import { View } from '@instructure/ui-view/latest' import { allowedProps } from './props' import type { ContentWrapProps } from './props' @@ -34,7 +34,7 @@ class ContentWrap extends Component { static defaultProps = { children: null, maxWidth: '80rem', - padding: 'none medium' + padding: 'none general.spaceXl' } render() { diff --git a/packages/__docs__/src/Document/index.tsx b/packages/__docs__/src/Document/index.tsx index c2e3161d05..0eda14fd82 100644 --- a/packages/__docs__/src/Document/index.tsx +++ b/packages/__docs__/src/Document/index.tsx @@ -24,14 +24,14 @@ import React, { Component } from 'react' -import { Link } from '@instructure/ui-link' -import { View } from '@instructure/ui-view' -import { Tabs } from '@instructure/ui-tabs' -import type { TabsProps } from '@instructure/ui-tabs' +import { Link } from '@instructure/ui-link/latest' +import { View } from '@instructure/ui-view/latest' +import { Tabs } from '@instructure/ui-tabs/latest' +import type { TabsProps } from '@instructure/ui-tabs/latest' import type { NewBaseTheme } from '@instructure/ui-themes' import type { ComponentTheme as ComponentThemeData } from '@instructure/shared-types' -import { SourceCodeEditor } from '@instructure/ui-source-code-editor' -import { withStyleForDocs as withStyleNew } from '../withStyleForDocs' +import { SourceCodeEditor } from '@instructure/ui-source-code-editor/latest' +import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' @@ -49,7 +49,7 @@ import { navigateTo } from '../navigationUtils' import { allowedProps } from './props' import type { DocumentProps, DocumentState, DocDataType } from './props' -@withStyleNew(generateStyle) +@withStyleForDocs(generateStyle) class Document extends Component { static displayName = 'Document' static allowedProps = allowedProps @@ -184,12 +184,17 @@ class Document extends Component { componentTheme && themeVariableKeys && themeVariableKeys.length > 0 ? ( - - + + Default Theme Variables {borrowsTokens ? ( - + Note: {doc.id} shares its theme tokens with{' '} {borrowedThemeId}, so the table below lists every token of {borrowedThemeId}. Some of these may not actually be @@ -197,7 +202,7 @@ class Document extends Component { ) : null} {doc.themePath ? ( - + See which global theme variables are mapped to the component here:{' '} {this.renderThemeLink(doc)}
@@ -213,23 +218,23 @@ class Document extends Component { ) : null} - + How to override the default theme - + In case you need to change the appearance of the{' '} {doc.id} component, you can override its {doc.themePath ? this.renderThemeLink(doc, ' default theme variables.') : ' default theme variables.'} - + The easiest way to do this is to utilize the{' '} themeOverride property. See the{' '} { } return ( - + {srcPath} ) @@ -331,8 +336,13 @@ class Document extends Component { import { ${importName} } from '${versionedPackageName}'` return ( - - + + Usage - + This import is pinned to the selected component version; future breaking changes land at new paths. For other import styles, see the{' '} - + + Parameters - + + Returns diff --git a/packages/__docs__/src/Document/styles.ts b/packages/__docs__/src/Document/styles.ts index f61f83ed32..053e274564 100644 --- a/packages/__docs__/src/Document/styles.ts +++ b/packages/__docs__/src/Document/styles.ts @@ -27,9 +27,8 @@ * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ diff --git a/packages/__docs__/src/Figure/index.tsx b/packages/__docs__/src/Figure/index.tsx index 17930e3cbe..5ecd3e0cd7 100644 --- a/packages/__docs__/src/Figure/index.tsx +++ b/packages/__docs__/src/Figure/index.tsx @@ -26,18 +26,17 @@ import { Children, Component, PropsWithChildren } from 'react' import { omitProps, ensureSingleChild } from '@instructure/ui-react-utils' import { - IconCheckMarkSolid, - IconNoSolid, - IconA11ySolid + CheckInstUIIcon, + BanInstUIIcon, + Accessibility2InstUIIcon } from '@instructure/ui-icons' -import { List } from '@instructure/ui-list' -import { Responsive } from '@instructure/ui-responsive' -import { View } from '@instructure/ui-view' +import { List } from '@instructure/ui-list/latest' +import { Responsive } from '@instructure/ui-responsive/latest' +import { View } from '@instructure/ui-view/latest' import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' -import generateComponentTheme from './theme' import { Heading } from '../Heading' import type { FigureProps } from './props' @@ -57,7 +56,7 @@ class FigureItem extends Component { } } -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class Figure extends Component { static displayName = 'Figure' static allowedProps = allowedProps @@ -83,13 +82,13 @@ class Figure extends Component { get recommendationIcon() { if (this.props.recommendation === 'yes') { - return IconCheckMarkSolid + return CheckInstUIIcon } else if (this.props.recommendation === 'no') { - return IconNoSolid + return BanInstUIIcon } else if (this.props.recommendation === 'a11y') { - return IconA11ySolid + return Accessibility2InstUIIcon } - return IconNoSolid + return BanInstUIIcon } renderFigure(props?: FigureProps) { @@ -110,17 +109,17 @@ class Figure extends Component { {recommendation !== 'none' ? ( - + ) : null} - + {title} - + {Children.map(children, (child) => { return {child} })} diff --git a/packages/__docs__/src/Figure/props.ts b/packages/__docs__/src/Figure/props.ts index 73f0e5088b..b175844fd0 100644 --- a/packages/__docs__/src/Figure/props.ts +++ b/packages/__docs__/src/Figure/props.ts @@ -23,15 +23,6 @@ */ import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' -import { - Shadows, - Typography, - Colors, - Spacing, - Border, - Stacking -} from '@instructure/shared-types' - type FigureOwnProps = { title?: React.ReactNode caption?: React.ReactNode @@ -45,28 +36,7 @@ type PropKeys = keyof FigureOwnProps type AllowedPropKeys = Readonly> -type FigureProps = FigureOwnProps & WithStyleProps - -type FigureTheme = { - shadow: Shadows['depth2'] - captionFontFamily: Typography['fontFamily'] - captionFontSize: Typography['fontSizeSmall'] - captionBackground: Colors['contrasts']['green1212'] - captionPadding: Spacing['small'] - captionColor: Colors['contrasts']['grey100100'] - borderWidth: Border['widthMedium'] - borderColor: Colors['contrasts']['grey100100'] - contentPadding: Spacing['medium'] - contentBackground: Colors['contrasts']['white1010'] - yesColor: Colors['contrasts']['green4570'] - noColor: Colors['contrasts']['red4570'] - a11yColor: Colors['contrasts']['blue4570'] - iconColor: Colors['contrasts']['white1010'] - iconContainerStacking: Stacking['above'] - iconContainerSize: Spacing['large'] - floatMargin: Spacing['large'] - floatMarginSmall: Spacing['xxSmall'] -} +type FigureProps = FigureOwnProps & WithStyleProps type FigureStyle = ComponentStyle< 'figure' | 'caption' | 'content' | 'iconContainer' @@ -80,5 +50,5 @@ const allowedProps: AllowedPropKeys = [ 'title' ] -export type { FigureProps, FigureStyle, FigureTheme } +export type { FigureProps, FigureStyle } export { allowedProps } diff --git a/packages/__docs__/src/Figure/styles.ts b/packages/__docs__/src/Figure/styles.ts index 71ae30d25b..aeca9d27cd 100644 --- a/packages/__docs__/src/Figure/styles.ts +++ b/packages/__docs__/src/Figure/styles.ts @@ -27,30 +27,33 @@ * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -import type { FigureProps, FigureStyle, FigureTheme } from './props' +import { boxShadowObjectsToCSSString } from '@instructure/ui-themes' +import type { DocsTokens } from '../withStyleForDocs' +import type { FigureProps, FigureStyle } from './props' const generateStyle = ( - componentTheme: FigureTheme, - props: FigureProps + props: FigureProps, + { semantics, sharedTokens }: DocsTokens ): FigureStyle => { const { recommendation } = props + const { success, error, info } = semantics.color.background + const iconContainerSize = '2.25rem' const recommendationVariants = { yes: { - figure: { borderTopColor: componentTheme.yesColor }, - iconContainer: { background: componentTheme.yesColor } + figure: { borderTopColor: success }, + iconContainer: { background: success } }, no: { - figure: { borderTopColor: componentTheme.noColor }, - iconContainer: { background: componentTheme.noColor } + figure: { borderTopColor: error }, + iconContainer: { background: error } }, a11y: { - figure: { borderTopColor: componentTheme.a11yColor }, - iconContainer: { background: componentTheme.a11yColor } + figure: { borderTopColor: info }, + iconContainer: { background: info } }, none: { figure: {}, @@ -66,10 +69,10 @@ const generateStyle = ( display: 'block', padding: 0, margin: 0, - boxShadow: componentTheme.shadow, - borderTopWidth: componentTheme.borderWidth, + boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation2), + borderTopWidth: semantics.borderWidth.md, borderTopStyle: 'solid', - borderTopColor: componentTheme.borderColor, + borderTopColor: semantics.color.stroke.accent.ash, ...recommendationVariants[recommendation].figure }, @@ -77,11 +80,11 @@ const generateStyle = ( caption: { label: 'figure__caption', display: 'block', - fontFamily: componentTheme.captionFontFamily, - fontSize: componentTheme.captionFontSize, - color: componentTheme.captionColor, - background: componentTheme.captionBackground, - padding: componentTheme.captionPadding, + fontFamily: semantics.fontFamily.base, + fontSize: semantics.fontSize.textSm, + color: semantics.color.text.base, + background: '#DCEEE4', + padding: semantics.spacing.spaceMd, textAlign: 'center' }, @@ -89,8 +92,8 @@ const generateStyle = ( label: 'figure__content', display: 'block', position: 'relative', - background: componentTheme.contentBackground, - padding: componentTheme.contentPadding + background: semantics.color.background.container, + padding: semantics.spacing.spaceXl }, iconContainer: { @@ -98,14 +101,14 @@ const generateStyle = ( position: 'absolute', top: '-0.0625rem', insetInlineEnd: '-0.0313rem', - zIndex: componentTheme.iconContainerStacking, - width: componentTheme.iconContainerSize, - height: componentTheme.iconContainerSize, + zIndex: 1, + width: iconContainerSize, + height: iconContainerSize, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', - color: componentTheme.iconColor, + color: semantics.color.text.onColor, ...recommendationVariants[recommendation].iconContainer } } diff --git a/packages/__docs__/src/Figure/theme.ts b/packages/__docs__/src/Figure/theme.ts deleted file mode 100644 index 98d8ccedfa..0000000000 --- a/packages/__docs__/src/Figure/theme.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -import { FigureTheme } from './props' -const generateComponentTheme = (theme: Theme): FigureTheme => { - const { - borders, - colors, - spacing, - shadows, - stacking, - typography, - key: themeName - } = theme - - const themeSpecificStyles: Record = {} - - const componentVariables = { - shadow: shadows?.depth2, - captionFontFamily: typography?.fontFamily, - captionFontSize: typography?.fontSizeSmall, - captionBackground: colors?.contrasts?.green1212, - captionPadding: spacing?.small, - captionColor: colors?.contrasts?.grey100100, - borderWidth: borders.widthMedium, - borderColor: colors?.contrasts?.grey100100, - contentPadding: spacing?.medium, - contentBackground: colors?.contrasts?.white1010, - yesColor: colors?.contrasts?.green4570, - noColor: colors?.contrasts?.red4570, - a11yColor: colors?.contrasts?.blue4570, - iconColor: colors?.contrasts?.white1010, - iconContainerStacking: stacking?.above, - iconContainerSize: spacing?.large, - floatMargin: spacing?.large, - floatMarginSmall: spacing?.xxSmall - } - - return { - ...componentVariables, - ...themeSpecificStyles[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/Guidelines/index.tsx b/packages/__docs__/src/Guidelines/index.tsx index 52f541679f..75d73d8393 100644 --- a/packages/__docs__/src/Guidelines/index.tsx +++ b/packages/__docs__/src/Guidelines/index.tsx @@ -23,7 +23,7 @@ */ import { Children, Component } from 'react' -import { Flex } from '@instructure/ui-flex' +import { Flex } from '@instructure/ui-flex/latest' import type { GuidelinesProps } from './props' import { allowedProps } from './props' @@ -38,7 +38,12 @@ class Guidelines extends Component { return ( {Children.map(this.props.children, (child) => ( - + {child} ))} diff --git a/packages/__docs__/src/Header/index.tsx b/packages/__docs__/src/Header/index.tsx index fff88a85ba..1c51ea6770 100644 --- a/packages/__docs__/src/Header/index.tsx +++ b/packages/__docs__/src/Header/index.tsx @@ -24,13 +24,13 @@ import { Component } from 'react' -import { Link } from '@instructure/ui-link' +import { Link } from '@instructure/ui-link/latest' import { InlineSVG } from '@instructure/ui-svg-images' -import { Text } from '@instructure/ui-text' -import { View } from '@instructure/ui-view' -import { CondensedButton } from '@instructure/ui-buttons' -import { IconMiniArrowDownLine } from '@instructure/ui-icons' -import { Menu } from '@instructure/ui-menu' +import { Text } from '@instructure/ui-text/latest' +import { View } from '@instructure/ui-view/latest' +import { CondensedButton } from '@instructure/ui-buttons/latest' +import { ChevronDownInstUIIcon } from '@instructure/ui-icons' +import { Menu } from '@instructure/ui-menu/latest' import { ScreenReaderContent } from '@instructure/ui-a11y-content' import { versionInPath } from '../versionData' @@ -107,7 +107,11 @@ class Header extends Component { { 'Documentation' )} - + } > @@ -149,7 +153,11 @@ class Header extends Component { render() { const { versionsData } = this.props return ( - + { navigateTo('index') }} > - + v{this.getDisplayVersion()} diff --git a/packages/__docs__/src/Heading/index.tsx b/packages/__docs__/src/Heading/index.tsx index c2ec5ec601..698e6c77ff 100644 --- a/packages/__docs__/src/Heading/index.tsx +++ b/packages/__docs__/src/Heading/index.tsx @@ -22,8 +22,8 @@ * SOFTWARE. */ -import { Heading as UIHeading } from '@instructure/ui-heading' -import type { HeadingProps } from '@instructure/ui-heading' +import { Heading as UIHeading } from '@instructure/ui-heading/latest' +import type { HeadingProps } from '@instructure/ui-heading/latest' import { InstUISettingsProvider } from '@instructure/emotion' const Heading = (props: HeadingProps) => ( diff --git a/packages/__docs__/src/Playground/theme.ts b/packages/__docs__/src/Hero/github-logo.tsx similarity index 54% rename from packages/__docs__/src/Playground/theme.ts rename to packages/__docs__/src/Hero/github-logo.tsx index 786ee7da92..9299f40f2a 100644 --- a/packages/__docs__/src/Playground/theme.ts +++ b/packages/__docs__/src/Hero/github-logo.tsx @@ -21,24 +21,13 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { Theme } from '@instructure/ui-themes' -import { PlaygroundTheme } from './props' -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): PlaygroundTheme => { - const { borders, typography } = theme - const componentVariables = { - editorBorderRadius: borders?.radiusMedium, - fontSize: typography?.fontSizeMedium - } +import { InlineSVG } from '@instructure/ui-svg-images' - return { - ...componentVariables - } +export default function GithubLogo() { + return ( + + + + ) } - -export default generateComponentTheme diff --git a/packages/__docs__/src/Hero/index.tsx b/packages/__docs__/src/Hero/index.tsx index 730b6a4f00..8d171178dd 100644 --- a/packages/__docs__/src/Hero/index.tsx +++ b/packages/__docs__/src/Hero/index.tsx @@ -24,21 +24,21 @@ import { Component } from 'react' -import { Button, IconButton } from '@instructure/ui-buttons' -import { Flex } from '@instructure/ui-flex' -import { Img } from '@instructure/ui-img' -import { Link } from '@instructure/ui-link' -import { InlineList, List } from '@instructure/ui-list' -import { Text } from '@instructure/ui-text' -import { View } from '@instructure/ui-view' -import { IconGithubSolid, IconCheckMarkSolid } from '@instructure/ui-icons' +import { Button, IconButton } from '@instructure/ui-buttons/latest' +import { Flex } from '@instructure/ui-flex/latest' +import { Img } from '@instructure/ui-img/latest' +import { Link } from '@instructure/ui-link/latest' +import { InlineList, List } from '@instructure/ui-list/latest' +import { Text } from '@instructure/ui-text/latest' +import { View } from '@instructure/ui-view/latest' +import { CheckInstUIIcon } from '@instructure/ui-icons' +import GithubLogo from './github-logo' import { AccessibleContent } from '@instructure/ui-a11y-content' import { InlineSVG, SVGIcon } from '@instructure/ui-svg-images' import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' -import generateComponentTheme from './theme' import { ColorBand } from '../ColorBand' import { ContentWrap } from '../ContentWrap' @@ -51,7 +51,7 @@ import { allowedProps } from './props' //@ts-expect-error ts complains for no real reason import logo from '../../logo.svg' -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class Hero extends Component { static displayName = 'Hero' static allowedProps = allowedProps @@ -179,7 +179,7 @@ class Hero extends Component { const bigScreen = layout === 'large' const contentMaxWidth = '84rem' - const checkmark = + const checkmark = const heroBodyContent = ( { tabIndex={0} aria-label="main content" > - + Components everyone can count on - + Instructure UI is maintained by Instructure designers, developers, and accessibility experts. Our components and utilities offer @@ -201,12 +201,14 @@ class Hero extends Component { - {checkmark} + + {checkmark} + Leading screen readers: VoiceOver, NVDA, and JAWS @@ -214,7 +216,9 @@ class Hero extends Component { - {checkmark} + + {checkmark} + Keyboard only navigation @@ -222,15 +226,17 @@ class Hero extends Component { - {checkmark} + + {checkmark} + Right-to-left (RTL) languages - + Getting started - + Check out our{' '} { project. - + React support: 18.0 and later @@ -267,10 +273,10 @@ class Hero extends Component { - + Accessibility - + Instructure UI components are designed to be accessible to everyone, including users with vision, hearing, cognitive, or motor @@ -288,16 +294,16 @@ class Hero extends Component { - + Contribute - + Whether it's finding a bug, committing a fix, or suggesting a feature, we welcome contributions. - + { display="block" href="https://www.instructure.com/canvas/" variant="standalone" - themeOverride={{ - hoverTextDecorationOutsideText: 'none' - }} > Instructure UI powers - + {canvasLogo} @@ -401,7 +404,11 @@ class Hero extends Component { shadow="resting" > @@ -409,14 +416,16 @@ class Hero extends Component { shouldShrink={!bigScreen} shouldGrow={!bigScreen} size={bigScreen ? '36%' : undefined} - padding={bigScreen ? 'none' : 'none x-small none none'} + padding={ + bigScreen ? 'none' : 'none general.spaceSm none none' + } > } + renderIcon={} screenReaderLabel="Contribute on Github" withBackground={false} withBorder={false} @@ -435,18 +444,18 @@ class Hero extends Component { - - + + Instructure UI @@ -464,7 +473,7 @@ class Hero extends Component { Create beautiful, accessible React apps. - + { withBackground={false} color="primary-inverse" href="guides-getting-started" - margin="0 x-small x-small 0" + margin="0 general.spaceSm general.spaceSm 0" size={bigScreen ? 'large' : 'medium'} onClick={(e: any) => { e.preventDefault() @@ -494,10 +503,10 @@ class Hero extends Component { @@ -508,7 +517,7 @@ class Hero extends Component { color="success" href="upgrade-guide-v11" size={bigScreen ? 'large' : 'medium'} - margin="0 x-small x-small 0" + margin="0 general.spaceSm general.spaceSm 0" onClick={(e: any) => { e.preventDefault() navigateTo('upgrade-guide-v11') @@ -522,23 +531,20 @@ class Hero extends Component { - + {bigScreen ? ( - + {heroBodyContent} diff --git a/packages/__docs__/src/Hero/props.ts b/packages/__docs__/src/Hero/props.ts index f525ebfa2a..7bc9de1f03 100644 --- a/packages/__docs__/src/Hero/props.ts +++ b/packages/__docs__/src/Hero/props.ts @@ -36,7 +36,7 @@ type PropKeys = keyof HeroOwnProps type AllowedPropKeys = Readonly> -type HeroProps = HeroOwnProps & WithStyleProps +type HeroProps = HeroOwnProps & WithStyleProps const allowedProps: AllowedPropKeys = [ 'docs', 'layout', @@ -47,9 +47,6 @@ type HeroStyle = ComponentStyle< 'backgroundColor' | 'overlayLayout' | 'contentLayout' | 'content' > -type HeroTheme = { - backgroundColor: string -} -export type { HeroStyle, HeroTheme } +export type { HeroStyle } export type { HeroProps } export { allowedProps } diff --git a/packages/__docs__/src/Hero/styles.ts b/packages/__docs__/src/Hero/styles.ts index 04df4575af..5809fd49a5 100644 --- a/packages/__docs__/src/Hero/styles.ts +++ b/packages/__docs__/src/Hero/styles.ts @@ -21,20 +21,23 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { HeroStyle, HeroTheme } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import type { HeroStyle } from './props' /** * --- * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -const generateStyle = (componentTheme: HeroTheme): HeroStyle => { +const generateStyle = ( + _props: unknown, + { semantics }: DocsTokens +): HeroStyle => { return { - backgroundColor: componentTheme.backgroundColor, + backgroundColor: semantics.color.background.info, overlayLayout: { label: 'hero__overlayLayout', diff --git a/packages/__docs__/src/Hero/theme.ts b/packages/__docs__/src/Hero/theme.ts deleted file mode 100644 index e911576e27..0000000000 --- a/packages/__docs__/src/Hero/theme.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' -import type { HeroTheme } from './props' -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): HeroTheme => { - const { colors, key: themeName } = theme - - const themeSpecificStyle: Record = {} - - const componentVariables = { - backgroundColor: colors?.contrasts?.blue4570 - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/Icons/IconsGallery.tsx b/packages/__docs__/src/Icons/IconsGallery.tsx index f9a8b86dc4..b763bea5fe 100644 --- a/packages/__docs__/src/Icons/IconsGallery.tsx +++ b/packages/__docs__/src/Icons/IconsGallery.tsx @@ -25,20 +25,20 @@ import { useState, memo, useCallback, useMemo, useRef } from 'react' import type { ChangeEvent } from 'react' -import { Heading } from '@instructure/ui-heading' -import { TextInput } from '@instructure/ui-text-input' -import { Checkbox } from '@instructure/ui-checkbox' -import { FormFieldGroup } from '@instructure/ui-form-field' -import { IconButton } from '@instructure/ui-buttons' +import { Heading } from '@instructure/ui-heading/latest' +import { TextInput } from '@instructure/ui-text-input/latest' +import { Checkbox } from '@instructure/ui-checkbox/latest' +import { FormFieldGroup } from '@instructure/ui-form-field/latest' +import { IconButton } from '@instructure/ui-buttons/latest' import { ScreenReaderContent, AccessibleContent } from '@instructure/ui-a11y-content' -import { Modal } from '@instructure/ui-modal' -import { SourceCodeEditor } from '@instructure/ui-source-code-editor' +import { Modal } from '@instructure/ui-modal/latest' +import { SourceCodeEditor } from '@instructure/ui-source-code-editor/latest' import { LucideIcons, CustomIcons } from '@instructure/ui-icons' import { XInstUIIcon } from '@instructure/ui-icons' -import { Flex } from '@instructure/ui-flex' +import { Flex } from '@instructure/ui-flex/latest' type IconInfo = { name: string @@ -265,7 +265,7 @@ const IconsGallery = () => {
- + Usage { language="javascript" readOnly /> - + Available Props
    diff --git a/packages/__docs__/src/Icons/index.tsx b/packages/__docs__/src/Icons/index.tsx index 3b2534eb5a..938674e20d 100644 --- a/packages/__docs__/src/Icons/index.tsx +++ b/packages/__docs__/src/Icons/index.tsx @@ -23,10 +23,10 @@ */ import { lazy, Suspense } from 'react' -import { Spinner } from '@instructure/ui-spinner' -import { View } from '@instructure/ui-view' -import { Alert } from '@instructure/ui-alerts' -import { Link } from '@instructure/ui-link' +import { Spinner } from '@instructure/ui-spinner/latest' +import { View } from '@instructure/ui-view/latest' +import { Alert } from '@instructure/ui-alerts/latest' +import { Link } from '@instructure/ui-link/latest' import { navigateTo } from '../navigationUtils' // Lazy load icons gallery component @@ -48,7 +48,7 @@ const IconsPage = () => {
} > - + For icons compatible with older versions, use{' '} onClick(glyph, 'line')} > {getIconNode('line')} @@ -157,7 +157,7 @@ const LegacyIconTile = memo( withBorder={false} screenReaderLabel={name} size="large" - margin="xx-small 0 xx-small 0" + margin="general.spaceXs 0 general.spaceXs 0" onClick={() => onClick(glyph, 'solid')} > {getIconNode('solid')} @@ -269,7 +269,7 @@ const LegacyIconsGallery = ({ glyphs }: LegacyIconsGalleryProps) => { /> {selectedFormat === 'font' && ( - + Icon Font is a deprecated format and only here for compatibility reasons. It doesn't have right-to-left support and some icons have visual artifacts due to svg-to-ttf conversion. We recommend using @@ -277,7 +277,7 @@ const LegacyIconsGallery = ({ glyphs }: LegacyIconsGalleryProps) => { )} {selectedFormat === 'svg' && ( - + The SVG format doesn't have right-to-left support. If you need that, please use the React format. @@ -330,7 +330,7 @@ const LegacyIconsGallery = ({ glyphs }: LegacyIconsGalleryProps) => {
- + Usage onClick('line')} > {getIconNode('line')} @@ -158,7 +158,7 @@ const LegacyIconTile = memo( withBorder={false} screenReaderLabel={name} size="large" - margin="xx-small 0 xx-small 0" + margin="general.spaceXs 0 general.spaceXs 0" onClick={() => onClick('solid')} > {getIconNode('solid')} @@ -241,14 +241,14 @@ const LegacyIconsPage = ({ iconData }: LegacyIconsPageProps) => { return (
- + Legacy Icons - + These legacy icons are for old (pre v11.7) components only. Do not use them with the new theming system. - + New icon set is available, please only use it with InstUI v11.7 or newer components:{' '} { Icons - + Our legacy icon components are rendered through Emotion, so server-side rendering inlines <style data-emotion=…> blocks alongside each <svg>, which can break consumers that @@ -303,7 +303,7 @@ const LegacyIconsPage = ({ iconData }: LegacyIconsPageProps) => { /> {selectedFormat === 'font' && ( - + Icon Font is a deprecated format and only here for compatibility reasons. It doesn't have right-to-left support and some icons have visual artifacts due to svg-to-ttf conversion. We recommend using @@ -311,7 +311,7 @@ const LegacyIconsPage = ({ iconData }: LegacyIconsPageProps) => { )} {selectedFormat === 'svg' && ( - + The SVG format doesn't have right-to-left support. If you need that, please use the React format. @@ -353,7 +353,7 @@ const LegacyIconsPage = ({ iconData }: LegacyIconsPageProps) => { setSelectedGlyph(null)} screenReaderLabel="Close" - renderIcon={IconXSolid} + renderIcon={XInstUIIcon} withBorder={false} withBackground={false} /> @@ -362,7 +362,7 @@ const LegacyIconsPage = ({ iconData }: LegacyIconsPageProps) => {
- + Usage ( diff --git a/packages/__docs__/src/LoadingScreen/index.tsx b/packages/__docs__/src/LoadingScreen/index.tsx index 11064e5d99..5ede73a986 100644 --- a/packages/__docs__/src/LoadingScreen/index.tsx +++ b/packages/__docs__/src/LoadingScreen/index.tsx @@ -24,9 +24,9 @@ import { Component } from 'react' import generateStyle from './styles' -import { withStyleForDocs as withStyleNew } from '../withStyleForDocs' +import { withStyleForDocs } from '../withStyleForDocs' import type { LoadingScreenProps } from './props' -@withStyleNew(generateStyle, null) +@withStyleForDocs(generateStyle) class LoadingScreen extends Component { static displayName = 'LoadingScreen' componentDidMount() { diff --git a/packages/__docs__/src/LoadingScreen/styles.ts b/packages/__docs__/src/LoadingScreen/styles.ts index 09707abe0e..7bc699789c 100644 --- a/packages/__docs__/src/LoadingScreen/styles.ts +++ b/packages/__docs__/src/LoadingScreen/styles.ts @@ -34,9 +34,8 @@ const docsLoadingAnimation = keyframes` * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ const generateStyle = (): LoadingScreenStyle => { diff --git a/packages/__docs__/src/Nav/index.tsx b/packages/__docs__/src/Nav/index.tsx index 88c1d66700..cc8fb5ed4a 100644 --- a/packages/__docs__/src/Nav/index.tsx +++ b/packages/__docs__/src/Nav/index.tsx @@ -24,18 +24,18 @@ import React, { Component } from 'react' -import { IconSearchLine } from '@instructure/ui-icons' -import { Link } from '@instructure/ui-link' -import { TextInput } from '@instructure/ui-text-input' +import { SearchInstUIIcon } from '@instructure/ui-icons' +import { Link } from '@instructure/ui-link/latest' +import { TextInput } from '@instructure/ui-text-input/latest' import { ScreenReaderContent } from '@instructure/ui-a11y-content' -import { View, ViewOwnProps } from '@instructure/ui-view' +import { View, ViewOwnProps } from '@instructure/ui-view/latest' import { capitalizeFirstLetter } from '@instructure/ui-utils' import { navigateTo, buildUrl } from '../navigationUtils' import { NavToggle } from '../NavToggle' import type { NavProps, NavState } from './props' -import { Alert } from '@instructure/ui-alerts' +import { Alert } from '@instructure/ui-alerts/latest' import type { Section } from '../../buildScripts/DataTypes.mjs' class Nav extends Component { @@ -276,8 +276,8 @@ class Nav extends Component { as="li" display="block" key={docId} - margin="xx-small none xx-small" - padding="none none none x-small" + margin="general.spaceMd none general.spaceMd" + padding="none none none general.spaceSm" position="relative" > {docSelected && ( @@ -478,8 +478,8 @@ class Nav extends Component { as="li" display="block" key={themeKey} - margin="xx-small none xx-small" - padding="none none none x-small" + margin="general.spaceSm none general.spaceSm" + padding="none none none general.spaceSm" position="relative" > {isSelected && ( @@ -546,7 +546,7 @@ class Nav extends Component { ] return ( - + { Search Documentation } type="search" - renderBeforeInput={} + renderBeforeInput={} messages={ hasMatches || this.state.queryStr == null ? undefined @@ -574,7 +574,7 @@ class Nav extends Component { > {this.state.announcement} - + {hasMatches && matches} diff --git a/packages/__docs__/src/NavToggle/index.tsx b/packages/__docs__/src/NavToggle/index.tsx index 2743369ee0..44ede405eb 100644 --- a/packages/__docs__/src/NavToggle/index.tsx +++ b/packages/__docs__/src/NavToggle/index.tsx @@ -24,9 +24,9 @@ import { Component } from 'react' -import { ToggleDetails } from '@instructure/ui-toggle-details' -import { Text } from '@instructure/ui-text' -import { View } from '@instructure/ui-view' +import { ToggleDetails } from '@instructure/ui-toggle-details/latest' +import { Text } from '@instructure/ui-text/latest' +import { View } from '@instructure/ui-view/latest' import { InstUISettingsProvider } from '@instructure/emotion' import type { NavToggleProps } from './props' import { allowedProps } from './props' @@ -73,8 +73,8 @@ class NavToggle extends Component { return ( diff --git a/packages/__docs__/src/NavToggle/props.ts b/packages/__docs__/src/NavToggle/props.ts index 441a3e911a..3e120ffb0a 100644 --- a/packages/__docs__/src/NavToggle/props.ts +++ b/packages/__docs__/src/NavToggle/props.ts @@ -23,7 +23,7 @@ */ import React from 'react' -import { ToggleDetailsProps } from '@instructure/ui-toggle-details' +import { ToggleDetailsProps } from '@instructure/ui-toggle-details/latest' type NavToggleOwnProps = { summary: string diff --git a/packages/__docs__/src/Params/index.tsx b/packages/__docs__/src/Params/index.tsx index 6471586487..7e8cb360bb 100644 --- a/packages/__docs__/src/Params/index.tsx +++ b/packages/__docs__/src/Params/index.tsx @@ -23,10 +23,10 @@ */ import { Component } from 'react' -import { Table } from '@instructure/ui-table' +import { Table } from '@instructure/ui-table/latest' import { compileMarkdown } from '../compileMarkdown' import type { ParamsProps } from './props' -import { Heading } from '@instructure/ui-heading' +import { Heading } from '@instructure/ui-heading/latest' class Params extends Component { static displayName = 'Params' @@ -85,13 +85,13 @@ class Params extends Component { level="h3" as="h4" id="genericParameters" - margin="0 0 small 0" + margin="0 0 general.spaceMd 0" > Generic type Parameters
'Parameters'} + margin="0 0 general.space2xl" layout={layout === 'small' ? 'stacked' : 'auto'} > @@ -120,8 +120,8 @@ class Params extends Component { return ( <>
'Parameters'} + margin="0 0 general.space2xl" layout={layout === 'small' ? 'stacked' : 'auto'} > diff --git a/packages/__docs__/src/Playground/index.tsx b/packages/__docs__/src/Playground/index.tsx index ff6a0bb173..5c51094f09 100644 --- a/packages/__docs__/src/Playground/index.tsx +++ b/packages/__docs__/src/Playground/index.tsx @@ -24,20 +24,19 @@ import { Component } from 'react' -import { Modal } from '@instructure/ui-modal' -import { Tooltip } from '@instructure/ui-tooltip' +import { Modal } from '@instructure/ui-modal/latest' +import { Tooltip } from '@instructure/ui-tooltip/latest' import { AccessibleContent } from '@instructure/ui-a11y-content' import { SVGIcon } from '@instructure/ui-svg-images' -import { SourceCodeEditor } from '@instructure/ui-source-code-editor' -import { Checkbox } from '@instructure/ui-checkbox' -import { Flex } from '@instructure/ui-flex' -import { IconButton, CloseButton } from '@instructure/ui-buttons' -import { IconXLine } from '@instructure/ui-icons' +import { SourceCodeEditor } from '@instructure/ui-source-code-editor/latest' +import { Checkbox } from '@instructure/ui-checkbox/latest' +import { Flex } from '@instructure/ui-flex/latest' +import { IconButton, CloseButton } from '@instructure/ui-buttons/latest' +import { XInstUIIcon } from '@instructure/ui-icons' import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' -import generateComponentTheme from './theme' import { AppContext } from '../appContext' import Preview from '../Preview' @@ -52,7 +51,7 @@ const fullScreenIconPath = ( ) -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class Playground extends Component { static displayName = 'Playground' static allowedProps = allowedProps @@ -143,7 +142,7 @@ class Playground extends Component { screenReaderLabel="Hide Code" withBorder={false} withBackground={false} - renderIcon={IconXLine} + renderIcon={XInstUIIcon} /> { {this.state.showCode && this.renderEditor()} - + @@ -252,7 +251,7 @@ class Playground extends Component { placement="bottom" > > type PlaygroundProps = PlaygroundOwnProps & - WithStyleProps + WithStyleProps type PlaygroundStyle = ComponentStyle<'playground' | 'close'> -type PlaygroundTheme = { - editorBorderRadius: Border['radiusMedium'] - fontSize: Typography['fontSizeMedium'] -} const allowedProps: AllowedPropKeys = ['code', 'language', 'readOnly', 'title'] @@ -54,5 +49,5 @@ export type PlaygroundState = { showCode: boolean rtl: boolean } -export type { PlaygroundProps, PlaygroundStyle, PlaygroundTheme } +export type { PlaygroundProps, PlaygroundStyle } export { allowedProps } diff --git a/packages/__docs__/src/Playground/styles.ts b/packages/__docs__/src/Playground/styles.ts index 2210567bd8..734f5b12f9 100644 --- a/packages/__docs__/src/Playground/styles.ts +++ b/packages/__docs__/src/Playground/styles.ts @@ -22,23 +22,26 @@ * SOFTWARE. */ -import { PlaygroundStyle, PlaygroundTheme } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import { PlaygroundStyle } from './props' /** * --- * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -const generateStyle = (componentTheme: PlaygroundTheme): PlaygroundStyle => { +const generateStyle = ( + _props: unknown, + { semantics }: DocsTokens +): PlaygroundStyle => { return { playground: { label: 'playground', - fontSize: componentTheme.fontSize, + fontSize: semantics.fontSize.textBase, margin: '1rem 0 2rem' }, diff --git a/packages/__docs__/src/Preview/index.tsx b/packages/__docs__/src/Preview/index.tsx index 7ce83c4cc4..03e9849b4f 100644 --- a/packages/__docs__/src/Preview/index.tsx +++ b/packages/__docs__/src/Preview/index.tsx @@ -27,14 +27,13 @@ import { DIRECTION, TextDirectionContext } from '@instructure/ui-i18n' import { InstUISettingsProvider } from '@instructure/emotion' import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' -import generateComponentTheme from './theme' import { compileAndRenderExample } from '../compileAndRenderExample' import { allowedProps } from './props' import type { PreviewProps, PreviewState } from './props' import * as themes from '@instructure/ui-themes' import { camelize } from '@instructure/ui-utils' -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class Preview extends Component { static displayName = 'Preview' static allowedProps = allowedProps diff --git a/packages/__docs__/src/Preview/props.ts b/packages/__docs__/src/Preview/props.ts index 9f09afe1cf..e899eca680 100644 --- a/packages/__docs__/src/Preview/props.ts +++ b/packages/__docs__/src/Preview/props.ts @@ -21,13 +21,6 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { - Colors, - Typography, - Spacing, - Border -} from '@instructure/shared-types' - import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' import type { MainDocsData } from '../../buildScripts/DataTypes.mjs' @@ -47,18 +40,8 @@ type PropKeys = keyof PreviewOwnProps type AllowedPropKeys = Readonly> -type PreviewProps = PreviewOwnProps & WithStyleProps +type PreviewProps = PreviewOwnProps & WithStyleProps -type PreviewTheme = { - padding: Spacing['small'] - borderRadius: Border['radiusMedium'] - borderWidth: Border['widthSmall'] - borderColor: string - fontFamilyError: 'Menlo, Consolas, Monaco, "Andale Mono", monospace' - fontSizeError: Typography['fontSizeSmall'] - backgroundError: Colors['contrasts']['red4570'] - colorError: Colors['contrasts']['white1010'] -} export type PreviewStyle = ComponentStyle<'preview' | 'previewError' | 'error'> type PreviewState = { @@ -73,5 +56,5 @@ const allowedProps: AllowedPropKeys = [ 'rtl', 'themeKey' ] -export type { PreviewProps, PreviewTheme, PreviewState } +export type { PreviewProps, PreviewState } export { allowedProps } diff --git a/packages/__docs__/src/Preview/styles.ts b/packages/__docs__/src/Preview/styles.ts index 90cf5559ea..bff299ba4e 100644 --- a/packages/__docs__/src/Preview/styles.ts +++ b/packages/__docs__/src/Preview/styles.ts @@ -22,31 +22,31 @@ * SOFTWARE. */ -import type { PreviewProps, PreviewTheme, PreviewStyle } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import type { PreviewProps, PreviewStyle } from './props' /** * --- * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: PreviewTheme, - props: PreviewProps + props: PreviewProps, + { semantics }: DocsTokens ): PreviewStyle => { const { fullscreen, frameless, themeKey } = props const previewStyle = { boxSizing: 'border-box', margin: 0, overflow: 'auto', - padding: componentTheme.padding, - borderWidth: componentTheme.borderWidth, + padding: semantics.spacing.spaceMd, + borderWidth: semantics.borderWidth.sm, borderStyle: 'solid', - borderColor: componentTheme.borderColor, - borderRadius: componentTheme.borderRadius, + borderColor: '#aaaaaa', + borderRadius: semantics.borderRadius.sm, backgroundColor: themeKey === 'dark' ? '#000000' : '#FFFFFF', ...(fullscreen && { position: 'fixed', @@ -62,16 +62,16 @@ const generateStyle = ( } const errorStyle = { - background: componentTheme.backgroundError, + background: semantics.color.background.error, boxSizing: 'border-box', margin: 0, display: 'block', - color: componentTheme.colorError, - fontFamily: componentTheme.fontFamilyError, - fontSize: componentTheme.fontSizeError, + color: semantics.color.text.onColor, + fontFamily: semantics.fontFamily.code, + fontSize: semantics.fontSize.textSm, lineHeight: 1.4, - 'pre, code': { color: componentTheme.colorError } + 'pre, code': { color: semantics.color.text.onColor } } return { diff --git a/packages/__docs__/src/Preview/theme.ts b/packages/__docs__/src/Preview/theme.ts deleted file mode 100644 index aac0aba099..0000000000 --- a/packages/__docs__/src/Preview/theme.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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 type { PreviewTheme } from './props' -import type { Theme } from '@instructure/ui-themes' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): PreviewTheme => { - const { colors, typography, spacing, borders } = theme - - return { - padding: spacing?.small, - borderRadius: borders?.radiusMedium, - borderWidth: borders?.widthSmall, - borderColor: '#aaaaaa', - fontFamilyError: 'Menlo, Consolas, Monaco, "Andale Mono", monospace', - fontSizeError: typography?.fontSizeSmall, - backgroundError: colors?.contrasts?.red4570, - colorError: colors?.contrasts?.white1010 - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/Properties/index.tsx b/packages/__docs__/src/Properties/index.tsx index 8bd27640d0..4fd122a4d8 100644 --- a/packages/__docs__/src/Properties/index.tsx +++ b/packages/__docs__/src/Properties/index.tsx @@ -24,8 +24,8 @@ import { Component } from 'react' -import { Table } from '@instructure/ui-table' -import { withStyleForDocs as withStyleNew } from '../withStyleForDocs' +import { Table } from '@instructure/ui-table/latest' +import { withStyleForDocs } from '../withStyleForDocs' import generateStyle from './styles' import { compileMarkdown } from '../compileMarkdown' @@ -39,10 +39,10 @@ import type { TSFunctionSignatureType, TypeDescriptor } from 'react-docgen' -import { Heading } from '@instructure/ui-heading' -import { View } from '@instructure/ui-view' +import { Heading } from '@instructure/ui-heading/latest' +import { View } from '@instructure/ui-view/latest' -@withStyleNew(generateStyle, null) +@withStyleForDocs(generateStyle) class Properties extends Component { static displayName = 'Properties' static defaultProps = { @@ -279,13 +279,13 @@ class Properties extends Component { } } return ( - - + + Properties
'Component Properties'} layout={layout === 'small' ? 'stacked' : 'auto'} > diff --git a/packages/__docs__/src/Properties/styles.ts b/packages/__docs__/src/Properties/styles.ts index 5d423a88ee..c9b98f9cd8 100644 --- a/packages/__docs__/src/Properties/styles.ts +++ b/packages/__docs__/src/Properties/styles.ts @@ -29,9 +29,8 @@ import type { PropertiesStyle } from './props' * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ const generateStyle = (): PropertiesStyle => { diff --git a/packages/__docs__/src/Returns/index.tsx b/packages/__docs__/src/Returns/index.tsx index 29f560d48b..6d40b51f04 100644 --- a/packages/__docs__/src/Returns/index.tsx +++ b/packages/__docs__/src/Returns/index.tsx @@ -23,7 +23,7 @@ */ import { Component } from 'react' -import { Table } from '@instructure/ui-table' +import { Table } from '@instructure/ui-table/latest' import type { ReturnsProps } from './props' import Markdown from 'marked-react' @@ -31,7 +31,7 @@ class Returns extends Component { static displayName = 'Returns' render() { return ( -
+
'Returns'} margin="0 0 general.space2xl"> Type diff --git a/packages/__docs__/src/Search/index.tsx b/packages/__docs__/src/Search/index.tsx index f4b1cff990..2f65633f4b 100644 --- a/packages/__docs__/src/Search/index.tsx +++ b/packages/__docs__/src/Search/index.tsx @@ -24,11 +24,11 @@ import { Component } from 'react' -import { Alert } from '@instructure/ui-alerts' -import { IconButton } from '@instructure/ui-buttons' +import { Alert } from '@instructure/ui-alerts/latest' +import { IconButton } from '@instructure/ui-buttons/latest' import { ScreenReaderContent } from '@instructure/ui-a11y-content' -import { IconTroubleLine } from '@instructure/ui-icons' -import { Select } from '@instructure/ui-select' +import { CircleXInstUIIcon } from '@instructure/ui-icons' +import { Select } from '@instructure/ui-select/latest' import { SearchStatus } from '../SearchStatus' import { navigateTo } from '../navigationUtils' @@ -296,7 +296,7 @@ class Search extends Component { screenReaderLabel="Clear search" onClick={this.handleClearInput} > - + ) : ( diff --git a/packages/__docs__/src/SearchStatus/index.tsx b/packages/__docs__/src/SearchStatus/index.tsx index 0dbb6cc19c..087400efcf 100644 --- a/packages/__docs__/src/SearchStatus/index.tsx +++ b/packages/__docs__/src/SearchStatus/index.tsx @@ -25,14 +25,13 @@ import { Component } from 'react' import { withStyleForDocs } from '../withStyleForDocs' -import { IconSearchLine } from '@instructure/ui-icons' +import { SearchInstUIIcon } from '@instructure/ui-icons' import generateStyle from './styles' -import generateComponentTheme from './theme' import type { SearchStatusProps } from './props' -@withStyleForDocs(generateStyle, generateComponentTheme) +@withStyleForDocs(generateStyle) class SearchStatus extends Component { static displayName = 'SearchStatus' static defaultProps = { @@ -51,7 +50,7 @@ class SearchStatus extends Component { render() { const { size, status, styles } = this.props if (status === 'inactive') { - return + return } else { return ( > type SearchStatusProps = SearchStatusOwnProps & - WithStyleProps + WithStyleProps -type SearchStatusTheme = { - colorBrand: Colors['contrasts']['blue4570'] - colorAlert: Colors['contrasts']['red4570'] - colorWarning: Colors['contrasts']['orange4570'] - colorDanger: Colors['contrasts']['red4570'] - colorFaceSuccess: Colors['contrasts']['blue4570'] - colorFaceFailure: Colors['contrasts']['orange4570'] - colorFeatures: Colors['contrasts']['grey125125'] -} export type SearchStatusStyle = ComponentStyle<'searchStatus' | 'box'> const allowedProps: AllowedPropKeys = ['size', 'status'] -export type { SearchStatusProps, SearchStatusTheme } +export type { SearchStatusProps } export { allowedProps } diff --git a/packages/__docs__/src/SearchStatus/styles.ts b/packages/__docs__/src/SearchStatus/styles.ts index 3f8376c99b..165c2c8369 100644 --- a/packages/__docs__/src/SearchStatus/styles.ts +++ b/packages/__docs__/src/SearchStatus/styles.ts @@ -22,11 +22,8 @@ * SOFTWARE. */ -import type { - SearchStatusTheme, - SearchStatusStyle, - SearchStatusProps -} from './props' +import type { DocsTokens } from '../withStyleForDocs' +import type { SearchStatusStyle, SearchStatusProps } from './props' import { keyframes } from '@instructure/emotion' // keyframes have to be outside of 'generateStyle', @@ -38,14 +35,13 @@ const scaleUp = keyframes` /** * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: SearchStatusTheme, - props: SearchStatusProps + props: SearchStatusProps, + { sharedTokens }: DocsTokens ): SearchStatusStyle => { const { status } = props @@ -85,24 +81,24 @@ const generateStyle = ( '&:nth-of-type(1)': { insetInlineStart: 0, top: 0, - background: componentTheme.colorBrand + background: sharedTokens.background.infoColor }, '&:nth-of-type(2)': { insetInlineEnd: 0, top: 0, - background: componentTheme.colorAlert, + background: sharedTokens.background.infoColor, animationDelay: '0.1s' }, '&:nth-of-type(3)': { insetInlineStart: 0, bottom: 0, - background: componentTheme.colorWarning, + background: sharedTokens.background.warningColor, animationDelay: '0.2s' }, '&:nth-of-type(4)': { insetInlineEnd: 0, bottom: 0, - background: componentTheme.colorDanger, + background: sharedTokens.background.errorColor, animationDelay: '0.3s' } } diff --git a/packages/__docs__/src/SearchStatus/theme.ts b/packages/__docs__/src/SearchStatus/theme.ts deleted file mode 100644 index 229904b6eb..0000000000 --- a/packages/__docs__/src/SearchStatus/theme.ts +++ /dev/null @@ -1,52 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' -import type { Colors } from '@instructure/shared-types' -import { SearchStatusTheme } from './props' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): SearchStatusTheme => { - const colors = theme.colors as Colors & { - inaccessibleAlert: string - inaccessibleWarning: string - } - - return { - colorBrand: colors?.contrasts?.blue4570, - colorDanger: colors?.contrasts?.red4570, - colorAlert: colors?.inaccessibleAlert || colors?.contrasts?.blue4570, - colorWarning: colors?.inaccessibleWarning || colors?.contrasts?.orange4570, - colorFaceSuccess: colors?.inaccessibleAlert || colors?.contrasts?.blue4570, - colorFaceFailure: - colors?.inaccessibleWarning || colors?.contrasts?.orange4570, - colorFeatures: colors?.contrasts?.grey125125 - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/Select/index.tsx b/packages/__docs__/src/Select/index.tsx index 2cec0479d4..21e02d174d 100644 --- a/packages/__docs__/src/Select/index.tsx +++ b/packages/__docs__/src/Select/index.tsx @@ -24,7 +24,7 @@ import { Component, Children, ReactElement } from 'react' -import { Select as UISelect } from '@instructure/ui-select' +import { Select as UISelect } from '@instructure/ui-select/latest' import type { SelectProps, SelectState } from './props' diff --git a/packages/__docs__/src/SharedTokensPage/index.tsx b/packages/__docs__/src/SharedTokensPage/index.tsx index 888b899df5..4544bb91ca 100644 --- a/packages/__docs__/src/SharedTokensPage/index.tsx +++ b/packages/__docs__/src/SharedTokensPage/index.tsx @@ -22,10 +22,10 @@ * SOFTWARE. */ -import { Alert } from '@instructure/ui-alerts' -import { Heading } from '@instructure/ui-heading' -import { Text } from '@instructure/ui-text' -import { View } from '@instructure/ui-view' +import { Alert } from '@instructure/ui-alerts/latest' +import { Heading } from '@instructure/ui-heading/latest' +import { Text } from '@instructure/ui-text/latest' +import { View } from '@instructure/ui-view/latest' import { boxShadowObjectsToCSSString } from '@instructure/ui-themes' import type { ComponentTheme as ComponentThemeType } from '@instructure/shared-types' import { ComponentTheme } from '../ComponentTheme' @@ -56,13 +56,17 @@ const SharedTokensPage = ({ layout, rawTokens }: SharedTokensPageProps) => { const content = ( - + Shared Tokens {!isV11_7 && ( - + Shared tokens are designed for components for v11.7{' '} and later. Components in v11.6 handle these individually in their themes. @@ -76,8 +80,8 @@ const SharedTokensPage = ({ layout, rawTokens }: SharedTokensPageProps) => { @instructure/emotion. {Object.entries(processedData).map(([section, data]) => ( - - + + {section} @@ -88,7 +92,7 @@ const SharedTokensPage = ({ layout, rawTokens }: SharedTokensPageProps) => { return (
- {content} + {content}
) } diff --git a/packages/__docs__/src/TableOfContents/index.tsx b/packages/__docs__/src/TableOfContents/index.tsx index 589f102319..9cd0ff5864 100644 --- a/packages/__docs__/src/TableOfContents/index.tsx +++ b/packages/__docs__/src/TableOfContents/index.tsx @@ -26,10 +26,10 @@ import { Component } from 'react' import { canUseDOM, ownerDocument } from '@instructure/ui-dom-utils' -import { Link } from '@instructure/ui-link' -import { List } from '@instructure/ui-list' -import { View } from '@instructure/ui-view' -import { ToggleDetails } from '@instructure/ui-toggle-details' +import { Link } from '@instructure/ui-link/latest' +import { List } from '@instructure/ui-list/latest' +import { View } from '@instructure/ui-view/latest' +import { ToggleDetails } from '@instructure/ui-toggle-details/latest' import { InstUISettingsProvider } from '@instructure/emotion' import type { SpacingValues } from '@instructure/emotion' @@ -147,9 +147,9 @@ class TableOfContents extends Component< 1: '0', 2: '0', 3: '0', - 4: 'small', - 5: 'medium', - 6: 'x-large' + 4: 'general.spaceMd', + 5: 'general.spaceXl', + 6: 'general.space2xl' } const TOC = TOCData.filter((data) => !!data.id).map((data) => { @@ -173,7 +173,7 @@ class TableOfContents extends Component< return ( - + = X[keyof X] type ThemeState = { showColors: boolean } -@withStyleForDocs(generateStyle, generateComponentTheme) - class Theme extends Component { +@withStyleForDocs(generateStyle) +class Theme extends Component { static displayName = 'Theme' static defaultProps = { description: undefined @@ -156,7 +155,7 @@ type ThemeState = { showColors: boolean } {valueColor.toString().charAt(0) === '#' ? ( - + {display} @@ -180,8 +179,10 @@ type ThemeState = { showColors: boolean } renderTable(name: string, content: React.ReactElement[], sub = false) { const headingElement = sub ? 'h4' : 'h3' const headingLevel = sub ? 'h3' : 'h2' - const margin = sub ? 'small none small' : 'small none large' - const padding = 'small' + const margin = sub + ? 'general.spaceMd none general.spaceMd' + : 'general.spaceMd none general.space2xl' + const padding = 'general.spaceMd' const label = name + 'variables' return ( @@ -192,10 +193,10 @@ type ThemeState = { showColors: boolean } as="div" background="secondary" padding={!sub ? padding : 'none'} - margin={!sub ? margin : 'small none none'} + margin={!sub ? margin : 'general.spaceMd none none'} borderRadius="medium" > -
+
label} key={name} layout="fixed"> @@ -252,7 +253,7 @@ type ThemeState = { showColors: boolean } background="secondary" as="div" padding="none" - margin="small none large" + margin="general.spaceMd none general.space2xl" borderRadius="medium" > {groups.map(({ label, data: groupData }) => @@ -292,7 +293,7 @@ type ThemeState = { showColors: boolean } background="secondary" as="div" padding="none" - margin="small none large" + margin="general.spaceMd none general.space2xl" borderRadius="medium" > @@ -324,7 +325,7 @@ type ThemeState = { showColors: boolean } return (
{isLegacyTheme && ( - + This theme is used by InstUI v11.6 components. For v11.7 and later, use the{' '} )} {variables.description && ( - + {variables.description} )} - + The rem values on this page are based on{' '} 1rem={px('1rem')}px. The rem unit represents the font-size of the root <html> element. @@ -424,7 +425,7 @@ ${'```'} this.renderNewThemeColors() ) ) : ( - + )} diff --git a/packages/__docs__/src/Theme/props.ts b/packages/__docs__/src/Theme/props.ts index 3ba14cfdf0..0e47bb2c35 100644 --- a/packages/__docs__/src/Theme/props.ts +++ b/packages/__docs__/src/Theme/props.ts @@ -21,7 +21,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { Colors, Typography, BaseTheme } from '@instructure/shared-types' +import type { BaseTheme } from '@instructure/shared-types' import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' @@ -34,13 +34,9 @@ type PropKeys = keyof ThemeOwnProps type AllowedPropKeys = Readonly> -type ThemeProps = ThemeOwnProps & WithStyleProps +type ThemeProps = ThemeOwnProps & WithStyleProps -type ThemeTheme = { - convertedValueTextColor: Colors['contrasts']['grey100100'] - convertedValueFontSize: Typography['fontSizeSmall'] -} export type ThemeStyle = ComponentStyle<'convertedValue'> const allowedProps: AllowedPropKeys = ['themeKey', 'variables'] -export type { ThemeProps, ThemeTheme } +export type { ThemeProps } export { allowedProps } diff --git a/packages/__docs__/src/Theme/styles.ts b/packages/__docs__/src/Theme/styles.ts index 9818cd2f8c..2033ee273b 100644 --- a/packages/__docs__/src/Theme/styles.ts +++ b/packages/__docs__/src/Theme/styles.ts @@ -22,21 +22,24 @@ * SOFTWARE. */ -import type { ThemeTheme, ThemeStyle } from './props' +import type { DocsTokens } from '../withStyleForDocs' +import type { ThemeStyle } from './props' /** * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} tokens The theme's semantic and shared tokens. * @return {Object} The final style object, which will be used in the component */ -const generateStyle = (componentTheme: ThemeTheme): ThemeStyle => { +const generateStyle = ( + _props: unknown, + { semantics }: DocsTokens +): ThemeStyle => { return { convertedValue: { label: 'searchStatus', - color: componentTheme.convertedValueTextColor, - fontSize: componentTheme.convertedValueFontSize, + color: semantics.color.text.base, + fontSize: semantics.fontSize.textSm, display: 'inline-block' } } diff --git a/packages/__docs__/src/Theme/theme.ts b/packages/__docs__/src/Theme/theme.ts deleted file mode 100644 index 37986f026d..0000000000 --- a/packages/__docs__/src/Theme/theme.ts +++ /dev/null @@ -1,42 +0,0 @@ -/* - * 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 type { ThemeTheme } from './props' -import type { Theme } from '@instructure/ui-themes' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): ThemeTheme => { - const { colors, typography } = theme - - return { - convertedValueTextColor: colors?.contrasts?.grey100100, - convertedValueFontSize: typography?.fontSizeSmall - } -} - -export default generateComponentTheme diff --git a/packages/__docs__/src/ThemeColors/index.tsx b/packages/__docs__/src/ThemeColors/index.tsx index d0f0443d96..ff45c1217e 100644 --- a/packages/__docs__/src/ThemeColors/index.tsx +++ b/packages/__docs__/src/ThemeColors/index.tsx @@ -24,9 +24,9 @@ import { Component } from 'react' -import { View } from '@instructure/ui-view' -import { Flex } from '@instructure/ui-flex' -import { Responsive } from '@instructure/ui-responsive' +import { View } from '@instructure/ui-view/latest' +import { Flex } from '@instructure/ui-flex/latest' +import { Responsive } from '@instructure/ui-responsive/latest' import { contrast } from '@instructure/ui-color-utils' import { ColorCard } from '../ColorCard' import { Heading } from '../Heading' @@ -94,17 +94,21 @@ class ThemeColors extends Component { }} render={(props) => { return ( - + {this.props.label} {Object.keys(colorGroups).map((colorGroup) => ( - + {colorGroups[colorGroup].map((color: string) => ( { @@ -37,7 +37,7 @@ class Paragraph extends Component { render() { return ( - + {this.props.children} ) diff --git a/packages/__docs__/src/ToggleBlockquote/index.tsx b/packages/__docs__/src/ToggleBlockquote/index.tsx index 4f7eea8dc8..00efca4d82 100644 --- a/packages/__docs__/src/ToggleBlockquote/index.tsx +++ b/packages/__docs__/src/ToggleBlockquote/index.tsx @@ -24,8 +24,8 @@ import { Component } from 'react' -import { View } from '@instructure/ui-view' -import { ToggleDetails } from '@instructure/ui-toggle-details' +import { View } from '@instructure/ui-view/latest' +import { ToggleDetails } from '@instructure/ui-toggle-details/latest' import { Heading } from '../Heading' import { Paragraph } from './Paragraph' import type { ToggleBlockquoteProps } from './props' @@ -42,8 +42,8 @@ class ToggleBlockquote extends Component { return ( { return ( - - + + Theme variable changes {removed && ( - - + + Removed -
+
`Removed variables`} layout="auto"> @@ -82,11 +82,11 @@ const V12ChangelogTable = ({ )} {added && ( - - + + Added -
+
`Added variables`} layout="auto"> Variable name @@ -108,11 +108,11 @@ const V12ChangelogTable = ({ )} {changed && ( - - + + Renamed -
+
`Renamed variables`} layout="auto"> Old variable diff --git a/packages/__docs__/src/canvas.ts b/packages/__docs__/src/canvas.ts deleted file mode 100644 index f739085630..0000000000 --- a/packages/__docs__/src/canvas.ts +++ /dev/null @@ -1,532 +0,0 @@ -/* - * 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 { canvas as OriginalCanvasTheme } from '@instructure/ui-themes' -/** - * Old (InstUI v11) theme, used just by docs components. - */ -const canvas = { - key: 'canvas', - description: 'This theme meets WCAG 2.1 AA rules for color contrast.', - newTheme: OriginalCanvasTheme.newTheme, - borders: { - radiusSmall: '0.125rem', - radiusMedium: '0.25rem', - radiusLarge: '0.5rem', - widthSmall: '0.0625rem', - widthMedium: '0.125rem', - widthLarge: '0.25rem', - style: 'solid' - }, - transitions: { - duration: '300ms', - timing: 'ease-in-out' - }, - typography: { - fontFamily: 'LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', - fontFamilyMonospace: 'Menlo, Consolas, Monaco, "Andale Mono", monospace', - letterSpacingNormal: 0, - letterSpacingCondensed: '-0.0625rem', - letterSpacingExpanded: '0.0625rem', - fontSizeXSmall: '0.75rem', - fontSizeSmall: '0.875rem', - fontSizeMedium: '1rem', - fontSizeLarge: '1.375rem', - fontSizeXLarge: '1.75rem', - fontSizeXXLarge: '2.375rem', - fontWeightLight: 300, - fontWeightNormal: 400, - fontWeightBold: 700, - lineHeight: 1.5, - lineHeightFit: 1.125, - lineHeightCondensed: 1.25, - lineHeightDouble: 2, - titlePageDesktop: '2.25rem', - titlePageMobile: '2rem', - titleSection: '1.75rem', - titleModule: '1.5rem', - titleCardLarge: '1.5rem', - titleCardRegular: '1.25rem', - titleCardMini: '1rem', - descriptionPage: '1.25rem', - descriptionSection: '1rem', - label: '1rem', - content: '1rem', - contentSmall: '0.875rem', - legend: '0.75rem', - lineHeight100: 1, - lineHeight125: 1.25, - lineHeight150: 1.5, - weightRegular: 400, - weightImportant: 700 - }, - spacing: { - xxxSmall: '0.125rem', - xxSmall: '0.375rem', - xSmall: '0.5rem', - small: '0.75rem', - mediumSmall: '1rem', - medium: '1.5rem', - large: '2.25rem', - xLarge: '3rem', - xxLarge: '3.75rem', - space0: '0rem', - space2: '0.125rem', - space4: '0.25rem', - space8: '0.5rem', - space12: '0.75rem', - space16: '1rem', - space24: '1.5rem', - space36: '2.25rem', - space48: '3rem', - space60: '3.75rem', - sections: '2.25rem', - sectionElements: '1.5em', - trayElements: '1.5em', - modalElements: '1.5em', - moduleElements: '1em', - paddingCardLarge: '1.5rem', - paddingCardMedium: '1rem', - paddingCardSmall: '0.75rem', - selects: '1rem', - textareas: '1rem', - inputFields: '1rem', - checkboxes: '1rem', - radios: '1rem', - toggles: '1rem', - buttons: '0.75rem', - tags: '0.75rem', - statusIndicators: '0.75rem', - dataPoints: '0.75rem' - }, - forms: { - inputHeightSmall: '1.75rem', - inputHeightMedium: '2.375rem', - inputHeightLarge: '3rem' - }, - media: { - mediumMin: 'min-width: 48em', - largeMin: 'min-width: 62em', - xLargeMin: 'min-width: 75em' - }, - breakpoints: { - xxSmall: '8em', - xSmall: '16em', - small: '30em', - medium: '48em', - tablet: '48em', - large: '62em', - desktop: '64em', - xLarge: '75em', - maxWidth: '61.9375em' - }, - shadows: { - depth1: - '0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)', - depth2: - '0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.15)', - depth3: - '0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)', - resting: - '0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)', - above: - '0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.15)', - topmost: - '0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)', - card: '0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)', - cardHover: - '0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25)' - }, - stacking: { - topmost: 9999, - above: 1, - below: -1, - deepest: -9999 - }, - colors: { - primitives: { - white: '#FFFFFF', - white10op75: '#FFFFFFBF', - grey11: '#F2F4F4', - grey12: '#E8EAEC', - grey14: '#D7DADE', - grey24: '#9EA6AD', - grey30: '#8D959F', - 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', - sea12: '#DAEEEF', - sea30: '#37A1AA', - sea35: '#1E95A0', - sea40: '#0A8C97', - sea45: '#00828E', - sea50: '#007B86', - sea57: '#00717B', - sea70: '#00626B', - sea90: '#005158', - sea110: '#004349', - violet12: '#F1E6F5', - violet30: '#B57FCC', - violet35: '#AC6FC6', - violet40: '#A564C2', - violet45: '#9E58BD', - violet50: '#994FB9', - violet57: '#9242B4', - violet70: '#7F399E', - violet90: '#682F82', - violet110: '#56276B' - }, - 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' - }, - contrasts: { - white1010: '#FFFFFF', - white1010op75: '#FFFFFFBF', - grey1111: '#F2F4F4', - grey1214: '#E8EAEC', - grey1424: '#D7DADE', - grey2424: '#9EA6AD', - grey3045: '#8D959F', - grey4570: '#6A7883', - grey5782: '#586874', - grey100100: '#334451', - grey100100op75: '#334451BF', - grey125125: '#273540', - blue1212: '#E0EBF5', - blue4570: '#2B7ABC', - blue5782: '#0E68B3', - green1212: '#DCEEE4', - green4570: '#03893D', - green5782: '#027634', - orange1212: '#FCE5D9', - orange3045: '#F06E26', - orange4570: '#CF4A00', - orange5782: '#B34000', - red1212: '#FCE4E5', - red4570: '#E62429', - red5782: '#C71F23', - violet1212: '#F1E6F5', - violet4570: '#9E58BD', - violet5790: '#9242B4', - sea4570: '#00828E', - sea5790: '#00717B' - }, - ui: { - surfacePagePrimary: '#FFFFFF', - surfacePageSecondary: '#F2F4F4', - surfaceCardPrimary: '#FFFFFF', - surfaceCardSecondary: '#F2F4F4', - surfaceDark: '#334451', - textTitle: '#273540', - textDescription: '#273540', - textBody: '#273540', - textTimestamp: '#586874', - textAuthor: '#586874', - textDatapoint: '#586874', - textLink: '#0E68B3', - textPlaceholder: '#9EA6AD', - textSuccess: '#027634', - textWarning: '#B34000', - textError: '#C71F23', - lineStroke: '#D7DADE', - lineDivider: '#E8EAEC', - surfaceOverlayGrey: '#334451BF', - surfaceOverlayWhite: '#FFFFFFBF', - surfaceAttention: '#2B7ABC', - surfaceSuccess: '#03893D', - surfaceWarning: '#CF4A00', - surfaceError: '#E62429', - surfaceDivider: '#E8EAEC', - textSurfaceColored: '#FFFFFF', - iconDefault: '#273540', - iconSuccess: '#03893D', - iconWarning: '#CF4A00', - iconError: '#E62429', - iconSurfaceColored: '#FFFFFF', - lineConnector: '#D7DADE' - }, - dataVisualization: { - rose12Primary: '#FEE4E4', - rose30Primary: '#FB5D5D', - rose45Primary: '#ED0000', - rose70Primary: '#B50000', - rose110Primary: '#7F0000', - rose35Secondary: '#FA3F3F', - rose40Secondary: '#FA1A1A', - rose50Secondary: '#E00000', - rose57Secondary: '#CE0000', - rose90Secondary: '#970000', - copper12Primary: '#FFE5D3', - copper30Primary: '#EE6D15', - copper45Primary: '#BF5811', - copper70Primary: '#90420D', - copper110Primary: '#622D09', - copper35Secondary: '#DB6414', - copper40Secondary: '#CD5E12', - copper50Secondary: '#B45310', - copper57Secondary: '#A54C0F', - copper90Secondary: '#77360B', - honey12Primary: '#F5E9CA', - honey30Primary: '#C08A00', - honey45Primary: '#996E00', - honey70Primary: '#745300', - honey110Primary: '#4E3800', - honey35Secondary: '#A57600', - honey40Secondary: '#B07E00', - honey50Secondary: '#916800', - honey57Secondary: '#856000', - honey90Secondary: '#5F4400', - forest12Primary: '#DFEEE0', - forest30Primary: '#55A459', - forest45Primary: '#27872B', - forest70Primary: '#1D6621', - forest110Primary: '#144516', - forest35Secondary: '#409945', - forest40Secondary: '#319135', - forest50Secondary: '#248029', - forest57Secondary: '#217526', - forest90Secondary: '#18541B', - aurora12Primary: '#DAEEE8', - aurora30Primary: '#38A585', - aurora45Primary: '#048660', - aurora70Primary: '#036549', - aurora110Primary: '#024531', - aurora35Secondary: '#1E9975', - aurora40Secondary: '#0B9069', - aurora50Secondary: '#047F5B', - aurora57Secondary: '#037453', - aurora90Secondary: '#02533C', - sea12Primary: '#DAEEEF', - sea30Primary: '#37A1AA', - sea45Primary: '#00828E', - sea70Primary: '#00626B', - sea110Primary: '#004349', - sea35Secondary: '#1E95A0', - sea40Secondary: '#0A8C97', - sea50Secondary: '#007B86', - sea57Secondary: '#00717B', - sea90Secondary: '#005158', - sky12Primary: '#DDECF3', - sky30Primary: '#4E9CC0', - sky45Primary: '#197EAB', - sky70Primary: '#135F81', - sky110Primary: '#0D4058', - sky35Secondary: '#3890B8', - sky40Secondary: '#2887B2', - sky50Secondary: '#1777A2', - sky57Secondary: '#156D94', - sky90Secondary: '#0F4E6A', - ocean12Primary: '#DFEBFB', - ocean30Primary: '#5694EB', - ocean45Primary: '#2573DF', - ocean70Primary: '#1C57A8', - ocean110Primary: '#133B72', - ocean35Secondary: '#4187E8', - ocean40Secondary: '#317DE6', - ocean50Secondary: '#236DD3', - ocean57Secondary: '#2063C1', - ocean90Secondary: '#17478B', - violet12Primary: '#F1E6F5', - violet30Primary: '#B57FCC', - violet45Primary: '#9E58BD', - violet70Primary: '#7F399E', - violet110Primary: '#56276B', - violet35Secondary: '#AC6FC6', - violet40Secondary: '#A564C2', - violet50Secondary: '#994FB9', - violet57Secondary: '#9242B4', - violet90Secondary: '#682F82', - plum12Primary: '#F7E5F0', - plum30Primary: '#D473B1', - plum45Primary: '#C54396', - plum70Primary: '#A31C73', - plum110Primary: '#70134F', - plum35Secondary: '#CE60A7', - plum40Secondary: '#CA529F', - plum50Secondary: '#C1368F', - plum57Secondary: '#BA2083', - plum90Secondary: '#87175F', - stone12Primary: '#EAEAEA', - stone30Primary: '#939393', - stone45Primary: '#767676', - stone70Primary: '#585858', - stone110Primary: '#3C3C3C', - stone35Secondary: '#878787', - stone40Secondary: '#7F7F7F', - stone50Secondary: '#6F6F6F', - stone57Secondary: '#666666', - stone90Secondary: '#494949' - } - }, - 'ic-brand-primary': '#2B7ABC', - 'ic-brand-font-color-dark': '#273540', - 'ic-link-color': '#0E68B3', - 'ic-link-decoration': 'none', - 'ic-brand-button--primary-bgd': '#2B7ABC', - 'ic-brand-button--primary-text': '#FFFFFF', - 'ic-brand-button--secondary-bgd': '#273540', - 'ic-brand-button--secondary-text': '#FFFFFF', - 'ic-brand-global-nav-bgd': '#334451', - 'ic-global-nav-link-hover': '#273540', - 'ic-brand-global-nav-ic-icon-svg-fill': '#FFFFFF', - 'ic-brand-global-nav-ic-icon-svg-fill--active': '#2B7ABC', - 'ic-brand-global-nav-menu-item__text-color': '#FFFFFF', - 'ic-brand-global-nav-menu-item__text-color--active': '#2B7ABC' -} - -export default canvas diff --git a/packages/__docs__/src/compileMarkdown.tsx b/packages/__docs__/src/compileMarkdown.tsx index 20a1bdc7df..d682abf445 100644 --- a/packages/__docs__/src/compileMarkdown.tsx +++ b/packages/__docs__/src/compileMarkdown.tsx @@ -28,12 +28,12 @@ import grayMatter from 'gray-matter' import { v4 as uuid } from 'uuid' import { InstUISettingsProvider } from '@instructure/emotion' -import canvas from '@instructure/ui-themes' +import { light } from '@instructure/ui-themes' -import { View } from '@instructure/ui-view' -import { Table } from '@instructure/ui-table' -import { Img } from '@instructure/ui-img' -import { SourceCodeEditor } from '@instructure/ui-source-code-editor' +import { View } from '@instructure/ui-view/latest' +import { Table } from '@instructure/ui-table/latest' +import { Img } from '@instructure/ui-img/latest' +import { SourceCodeEditor } from '@instructure/ui-source-code-editor/latest' import { Playground } from './Playground' import { compileAndRenderExample } from './compileAndRenderExample' @@ -103,7 +103,7 @@ const headingVariants: Record< id={getHeadingId(children)} key={key} level="h1" - margin="0 0 large" + margin="0 0 general.space2xl" > {children} @@ -115,7 +115,7 @@ const headingVariants: Record< key={key} level="h1" as="h2" - margin="x-large 0 large 0" + margin="general.space2xl 0 general.space2xl 0" > {children} @@ -126,7 +126,7 @@ const headingVariants: Record< key={key} level="h2" as="h3" - margin="large 0 medium 0" + margin="general.space2xl 0 general.spaceXl 0" > {children} @@ -138,7 +138,7 @@ const headingVariants: Record< key={key} level="h3" as="h4" - margin="large 0 medium 0" + margin="general.space2xl 0 general.spaceXl 0" > {children} @@ -150,7 +150,7 @@ const headingVariants: Record< key={key} level="h4" as="h5" - margin="large 0 small 0" + margin="general.space2xl 0 general.spaceMd 0" > {children} @@ -202,7 +202,7 @@ const renderer = (title: string) => ({ const body = table?.[1]?.props?.children return ( -
+
'Tabs for codePreview'}> {headCells?.map((headCell: string) => ( @@ -248,21 +248,21 @@ const renderer = (title: string) => ({ if (type === 'code') { return ( - + {getComponent('SourceCodeEditor', data)} ) } if (type === 'embed') { return ( - + {compileAndRenderExample(matter.content)} ) } if (type === 'example') { return ( - + {getComponent('Playground', data)} ) diff --git a/packages/__docs__/src/index.tsx b/packages/__docs__/src/index.tsx index 7b22c28e9a..5936e8b68c 100644 --- a/packages/__docs__/src/index.tsx +++ b/packages/__docs__/src/index.tsx @@ -26,7 +26,7 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { App } from './App' -import canvas from './canvas' +import { light } from '@instructure/ui-themes' import { InstUISettingsProvider } from '@instructure/emotion' import '../globals' @@ -44,7 +44,7 @@ if (spaRouteParam) { createRoot(document.getElementById('app')!).render( - + diff --git a/packages/__docs__/src/withStyleForDocs.tsx b/packages/__docs__/src/withStyleForDocs.tsx index 9a955aad4d..32fff0fff0 100644 --- a/packages/__docs__/src/withStyleForDocs.tsx +++ b/packages/__docs__/src/withStyleForDocs.tsx @@ -31,78 +31,33 @@ import type { import hoistNonReactStatics from 'hoist-non-react-statics' -import { deepEqual as isEqual } from '@instructure/ui-utils' -import { warn } from '@instructure/console' +import { deepEqual as isEqual, mergeDeep } from '@instructure/ui-utils' import { decorator } from '@instructure/ui-decorator' - -import { getComponentThemeOverride } from '@instructure/emotion' -import { useTheme } from '@instructure/emotion' -import type { - BaseTheme, - ComponentTheme, - DeepPartial, - ComponentThemeMap, - InstUIComponent -} from '@instructure/shared-types' - +import { applyColorModifiers, useTheme } from '@instructure/emotion' import type { ComponentStyle } from '@instructure/emotion' -import { StyleObject } from '@instructure/emotion' +import type { Light, SharedTokens, Theme } from '@instructure/ui-themes' /** - * A theme object where every prop is optional + * The theme's semantic tokens. */ -type PartialTheme = DeepPartial> -type Props = Record -type State = Record -type GenerateComponentTheme = ( - theme: BaseTheme | PartialTheme -) => ComponentTheme - -type GenerateStyle = ( - componentTheme: ComponentTheme, - props: Props, - state?: State -) => StyleObject +type Semantics = ReturnType /** - * Keys are component IDs, values are their theme props. - * Key can be an arbitrary string to support custom components + * Docs components are not registered in the theme's component map, so they read + * what they need from here instead of from a `theme.ts`. */ -type ComponentOverride = { - [otherComponent: string]: ComponentTheme -} & DeepPartial - -// Extract is needed because it would allow number otherwise -// https://stackoverflow.com/a/51808262/319473 - -// Unique name of an InstUI component -type ComponentName = Extract - -interface WithStyleComponent extends InstUIComponent { - componentId?: ComponentName +type DocsTokens = { + semantics: Semantics + sharedTokens: SharedTokens } -type WithStylePrivateProps< - Style extends ComponentStyle | null = ComponentStyle -> = Style extends null - ? object - : { - styles?: Style - makeStyles?: (extraArgs?: Record) => void - } - -type ThemeOverrideProp = { - themeOverride?: - | Partial - | ((componentTheme: Theme, currentTheme: BaseTheme) => Partial) -} +type Props = Record -type WithStyleProps< - Theme extends ComponentTheme | null = ComponentTheme, - Style extends ComponentStyle | null = ComponentStyle -> = Theme extends null - ? WithStylePrivateProps