@instructure/ui-themes 11.6.0 → 11.6.1-snapshot-129

package/src/themes/dark/index.ts

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import sharedThemeTokens from '../../sharedThemeTokens'
+import { colors } from './colors'
+import { dark } from '../newThemes'
+import { Theme } from '../../index'
+
+import { Colors } from '@instructure/shared-types'
+import type { Dark } from '../newThemes'
+
+const key = 'dark'
+
+export type DarkTheme = Theme<Dark, 'dark'> &
+  typeof sharedThemeTokens & { colors: Colors }
+
+const theme: DarkTheme = {
+  newTheme: dark,
+  key,
+  description: 'This theme meets WCAG 2.1 AA rules for color contrast.',
+  ...sharedThemeTokens,
+  colors
+}
+
+export default theme

package/src/themes/light/colors.ts

@@ -0,0 +1,83 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  primitives,
+  additionalPrimitives
+} from '../../sharedThemeTokens/colors/primitives'
+import dataVisualization from '../../sharedThemeTokens/colors/dataVisualization'
+import getUIColors from '../../utils/getUIColors'
+
+import type { Contrasts, UI } from '@instructure/shared-types'
+
+const contrasts: Contrasts = {
+  white1010: primitives.white,
+  white1010op75: primitives.white10op75,
+
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey12,
+  grey1424: primitives.grey14,
+  grey2424: primitives.grey24,
+  grey3045: primitives.grey30,
+  grey4570: primitives.grey45,
+  grey5782: primitives.grey57,
+  grey100100: primitives.grey100,
+  grey100100op75: primitives.grey100op75,
+  grey125125: primitives.grey125,
+
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue45,
+  blue5782: primitives.blue57,
+
+  green1212: primitives.green12,
+  green4570: primitives.green45,
+  green5782: primitives.green57,
+
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange30,
+  orange4570: primitives.orange45,
+  orange5782: primitives.orange57,
+
+  red1212: primitives.red12,
+  red4570: primitives.red45,
+  red5782: primitives.red57,
+
+  violet1212: primitives.violet12,
+  violet4570: primitives.violet45,
+  violet5790: primitives.violet57,
+  sea4570: primitives.sea45,
+  sea5790: primitives.sea57
+}
+
+const ui: UI = getUIColors(contrasts)
+
+const colors = {
+  primitives,
+  additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization
+}
+export default { primitives, contrasts, ui }
+export { colors }

package/src/themes/light/index.ts

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import sharedThemeTokens from '../../sharedThemeTokens'
+import { colors } from './colors'
+import { light } from '../newThemes'
+import { Theme } from '../../index'
+
+import type { Colors } from '@instructure/shared-types'
+import type { Light } from '../newThemes'
+
+const key = 'light'
+
+export type LightTheme = Theme<Light, 'light'> &
+  typeof sharedThemeTokens & { colors: Colors }
+
+const theme: LightTheme = {
+  newTheme: light,
+  key,
+  description: 'This theme meets WCAG 2.1 AA rules for color contrast.',
+  ...sharedThemeTokens,
+  colors
+}
+
+export default theme

package/src/themes/newThemes/commonTypes.ts

@@ -0,0 +1,212 @@
+/*
+ * 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 { TokenTextCaseValue, TokenTextDecorationValue } from "@tokens-studio/types"
+import type { ComponentTypes } from "./componentTypes"
+
+// This type is broken in Token Studio, use their version when the bug is fixed
+export type TokenBoxshadowValueInst = {
+  color: string
+  type: "dropShadow" | "innerShadow" // BUG: this is an enum in the original
+  x: string | number
+  y: string | number
+  blur: string | number
+  spread: string | number
+  blendMode?: string
+}
+// This type is broken in Token Studio, use their version when the bug is fixed
+export type TokenTypographyValueInst = {
+  fontFamily?: string
+  fontWeight?: string | number // BUG: this is just 'string' in the original
+  fontSize?: string
+  lineHeight?: string | number
+  letterSpacing?: string
+  paragraphSpacing?: string
+  paragraphIndent?: string
+  textCase?: TokenTextCaseValue
+  textDecoration?: TokenTextDecorationValue
+}
+
+export type SharedTokens = {
+  borderRadius: {
+    xs: string
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    xxl: string
+    full: string
+    card: { sm: string; md: string; lg: string; nestedContainer: { sm: string; md: string; lg: string } }
+  }
+  legacy: {
+    spacing: {
+      xxxSmall: string
+      xxSmall: string
+      xSmall: string
+      small: string
+      mediumSmall: string
+      medium: string
+      large: string
+      xLarge: string
+      xxLarge: string
+      space0: string
+      space2: string
+      space4: string
+      space8: string
+      space12: string
+      space16: string
+      space24: string
+      space36: string
+      space48: string
+      space60: string
+      sections: string
+      sectionElements: string
+      trayElements: string
+      modalElements: string
+      moduleElements: string
+      paddingCardLarge: string
+      paddingCardMedium: string
+      paddingCardSmall: string
+      selects: string
+      textareas: string
+      inputFields: string
+      checkboxes: string
+      radios: string
+      toggles: string
+      buttons: string
+      tags: string
+      statusIndicators: string
+      dataPoints: string
+    }
+    radiusSmall: string
+    radiusMedium: string
+    radiusLarge: string
+  }
+  boxShadow: {
+    /** Elevated base surfaces: Persistent UI and everyday interactive surfaces like navigation, cards, inputs, and buttons. */
+    elevation1: { "0": TokenBoxshadowValueInst; "1": TokenBoxshadowValueInst }
+    /** Menus & Popovers: Anchored, contextual layers such as dropdowns, popovers, and context menus. */
+    elevation2: { "0": TokenBoxshadowValueInst; "1": TokenBoxshadowValueInst }
+    /** Floating UI: Detached, transient elements like tooltips, hover cards, and floating actions. */
+    elevation3: { "0": TokenBoxshadowValueInst; "1": TokenBoxshadowValueInst }
+    /** Dialogs & Panels: Top-priority surfaces including modals, alerts, and side panels. */
+    elevation4: { "0": TokenBoxshadowValueInst; "1": TokenBoxshadowValueInst }
+  }
+  spacing: {
+    general: {
+      space2xs: string
+      spaceXs: string
+      spaceSm: string
+      spaceMd: string
+      spaceLg: string
+      spaceXl: string
+      space2xl: string
+      spaceNone: string
+    }
+    gap: {
+      sections: string
+      buttons: string
+      cards: { sm: string; md: string; lg: string; nestedContainers: { sm: string; md: string; lg: string } }
+      inputs: { horizontal: string; vertical: string }
+    }
+    padding: { card: { sm: string; md: string; lg: string } }
+  }
+  focusOutline: {
+    offset: string
+    inset: string
+    width: string
+    infoColor: string
+    onColor: string
+    successColor: string
+    dangerColor: string
+    style: string
+  }
+  background: {
+    containerColor: string
+    baseColor: string
+    pageColor: string
+    mutedColor: string
+    brandColor: string
+    onColor: string
+    /** Background color for inverse components. Dark grey in light mode; light grey in dark mode. */
+    inverseColor: string
+    successColor: string
+    errorColor: string
+    warningColor: string
+    infoColor: string
+    aiTopGradientColor: string
+    aiBottomGradientColor: string
+    aiTextColor: string
+    accentAsh: string
+    accentAurora: string
+    accentBlue: string
+    accentGreen: string
+    accentGrey: string
+    accentHoney: string
+    accentOrange: string
+    accentPlum: string
+    accentRed: string
+    accentSea: string
+    accentSky: string
+    accentStone: string
+    accentViolet: string
+  }
+  stroke: {
+    baseColor: string
+    mutedColor: string
+    strongColor: string
+    brandColor: string
+    successColor: string
+    errorColor: string
+    warningColor: string
+    infoColor: string
+    aiTopGradientColor: string
+    aiBottomGradientColor: string
+    accentAsh: string
+    accentAurora: string
+    accentBlue: string
+    accentGreen: string
+    accentGrey: string
+    accentHoney: string
+    accentOrange: string
+    accentPlum: string
+    accentRed: string
+    accentSea: string
+    accentSky: string
+    accentStone: string
+    accentViolet: string
+    visualSeparator: string
+  }
+  strokeWidth: { sm: string; md: string; lg: string }
+}
+
+export type BaseTheme<
+  P extends Record<string, any> = Record<string, any>,
+  S extends Record<string, any> = Record<string, any>,
+> = {
+  primitives: P
+  semantics: S
+  sharedTokens: SharedTokens
+  components: ComponentTypes
+}

package/src/themes/newThemes/componentTypes/aiInformation.ts

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

package/src/themes/newThemes/componentTypes/alert.ts

@@ -0,0 +1,50 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type Alert = {
+  background: string
+  borderRadius: string
+  borderStyle: string | number
+  borderWidth: string
+  closeButtonMarginRight: string | number
+  closeButtonMarginTop: string | number
+  color: string
+  contentFontFamily: string
+  contentFontSize: string
+  contentFontWeight: string | number
+  contentLineHeight: string | number
+  dangerBorderColor: string
+  dangerIconBackground: string
+  iconColor: string
+  infoBorderColor: string
+  infoIconBackground: string
+  successBorderColor: string
+  successIconBackground: string
+  warningBorderColor: string
+  warningIconBackground: string
+  contentPaddingVertical: string
+  contentPaddingHorizontal: string
+}
+
+export default Alert

package/src/themes/newThemes/componentTypes/appNav.ts

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

package/src/themes/newThemes/componentTypes/appNavItem.ts

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

package/src/themes/newThemes/componentTypes/avatar.ts

@@ -0,0 +1,68 @@
+/*
+ * 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 { TokenBoxshadowValueInst } from "../commonTypes"
+
+export type Avatar = {
+  backgroundColor: string
+  borderColor: string
+  borderWidthSm: string
+  borderWidthMd: string
+  /** Do not use this for other components */
+  boxShadow: TokenBoxshadowValueInst
+  fontWeight: string | number
+  blueBackgroundColor: string
+  blueTextColor: string
+  greenBackgroundColor: string
+  greenTextColor: string
+  redBackgroundColor: string
+  redTextColor: string
+  orangeBackgroundColor: string
+  orangeTextColor: string
+  greyBackgroundColor: string
+  greyTextColor: string
+  ashBackgroundColor: string
+  ashTextColor: string
+  aiBottomGradientColor: string
+  aiTopGradientColor: string
+  textOnColor: string
+  size2xs: string
+  sizeXs: string
+  sizeSm: string
+  sizeMd: string
+  sizeLg: string
+  sizeXl: string
+  size2xl: string
+  fontSize2xs: string
+  fontSizeXs: string
+  fontSizeSm: string
+  fontSizeMd: string
+  fontSizeLg: string
+  fontSizeXl: string
+  fontSize2xl: string
+  fontFamily: string
+  rectangleRadius: string
+}
+
+export default Avatar

package/src/themes/newThemes/componentTypes/badge.ts

@@ -0,0 +1,44 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type Badge = {
+  borderRadius: string
+  fontFamily: string
+  color: string
+  colorInverse: string
+  colorDanger: string
+  colorSuccess: string
+  colorPrimary: string
+  fontSize: string
+  fontWeight: string | number
+  sizeNotification: string
+  size: string
+  padding: string
+  notificationOffset: string | number
+  notificationZIndex: number
+  pulseBorderThickness: string | number
+  countOffset: string | number
+}
+
+export default Badge