@instructure/shared-types 9.5.2-snapshot-1 → 10.0.0

package/CHANGELOG.md

@@ -3,9 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.5.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-1) (2024-07-31)
+# [10.0.0](https://github.com/instructure/instructure-ui/compare/v9.5.1...v10.0.0) (2024-07-31)
 
-**Note:** Version bump only for package @instructure/shared-types
+
+### Features
+
+* **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
+* **shared-types,ui-theme-tokens:** add transparent colors to the palette ([7219606](https://github.com/instructure/instructure-ui/commit/7219606144114fd4bf4048177dfe31ee81de76d9))
+
+
+### BREAKING CHANGES
+
+* **many:** Breaks color overrides in certain cases
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/shared-types",
-  "version": "9.5.2-snapshot-1",
+  "version": "10.0.0",
   "description": "Shared TypeScript typings for Instructure UI packages.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.design/#shared-types",

package/src/Colors.ts

@@ -22,121 +22,111 @@
  * SOFTWARE.
  */
 
-type BaseColors = {
-  brand: string
-  link: string
-  electric: string
-  shamrock: string
-  barney: string
-  crimson: string
-  fire: string
-  licorice: string
-  oxford: string
-  ash: string
-  slate: string
-  tiara: string
-  porcelain: string
+type Primitives = {
   white: string
-}
+  white10op75: string
+
+  grey11: string
+  grey12: string
+  grey14: string
+  grey24: string
+  grey45: string
+  grey57: string
+  grey70: string
+  grey82: string
+  grey100: string
+  grey100op75: string
+  grey125: string
+
+  blue12: string
+  blue45: string
+  blue57: string
+  blue70: string
+  blue82: string
+
+  green12: string
+  green45: string
+  green57: string
+  green70: string
+  green82: string
 
-type TextColors = {
-  textDarkest: BaseColors['licorice']
-  textDark: BaseColors['ash']
-  textLight: BaseColors['porcelain']
-  textLightest: BaseColors['white']
-  textBrand: BaseColors['brand']
-  textLink: BaseColors['link']
-  textAlert: BaseColors['barney']
-  textInfo: BaseColors['brand']
-  textSuccess: BaseColors['shamrock']
-  textDanger: BaseColors['crimson']
-  textWarning: BaseColors['fire']
+  orange12: string
+  orange30: string
+  orange45: string
+  orange57: string
+  orange70: string
+  orange82: string
+
+  red12: string
+  red45: string
+  red57: string
+  red70: string
+  red82: string
 }
 
-type BackgroundColors = {
-  backgroundDarkest: BaseColors['licorice']
-  backgroundDark: BaseColors['ash']
-  backgroundMedium: BaseColors['tiara']
-  backgroundLight: BaseColors['porcelain']
-  backgroundLightest: BaseColors['white']
-  backgroundBrand: BaseColors['brand']
-  backgroundBrandSecondary: BaseColors['oxford']
-  backgroundAlert: BaseColors['barney']
-  backgroundInfo: BaseColors['brand']
-  backgroundSuccess: BaseColors['shamrock']
-  backgroundDanger: BaseColors['crimson']
-  backgroundWarning: BaseColors['fire']
+type Contrasts = {
+  white1010: Primitives['white']
+  white1010op75: Primitives['white10op75']
+
+  grey1111: Primitives['grey11']
+  grey1214: Primitives['grey12'] | Primitives['grey14']
+  grey1424: Primitives['grey14'] | Primitives['grey24']
+  grey2424: Primitives['grey24']
+  grey4570: Primitives['grey45'] | Primitives['grey70']
+  grey5782: Primitives['grey57'] | Primitives['grey82']
+  grey100100: Primitives['grey100']
+  grey100100op75: Primitives['grey100op75']
+  grey125125: Primitives['grey125']
+
+  blue1212: Primitives['blue12']
+  blue4570: Primitives['blue45'] | Primitives['blue70']
+  blue5782: Primitives['blue57'] | Primitives['blue82']
+
+  green1212: Primitives['green12']
+  green4570: Primitives['green45'] | Primitives['green70']
+  green5782: Primitives['green57'] | Primitives['green82']
+
+  orange1212: Primitives['orange12']
+  orange3045: Primitives['orange30'] | Primitives['orange45']
+  orange4570: Primitives['orange45'] | Primitives['orange70']
+  orange5782: Primitives['orange57'] | Primitives['orange82']
+
+  red1212: Primitives['red12']
+  red4570: Primitives['red45'] | Primitives['red70']
+  red5782: Primitives['red57'] | Primitives['red82']
 }
 
-type BorderColors = {
-  borderLightest: BaseColors['white']
-  borderLight: BaseColors['porcelain']
-  borderMedium: BaseColors['tiara']
-  borderDark: BaseColors['ash']
-  borderDarkest: BaseColors['licorice']
-  borderBrand: BaseColors['brand']
-  borderAlert: BaseColors['barney']
-  borderInfo: BaseColors['brand']
-  borderSuccess: BaseColors['shamrock']
-  borderDanger: BaseColors['crimson']
-  borderWarning: BaseColors['fire']
-  borderDebug: BaseColors['crimson']
+type UI = {
+  surfacePagePrimary: Contrasts['white1010']
+  surfacePageSecondary: Contrasts['grey1111']
+  surfaceCardPrimary: Contrasts['white1010']
+  surfaceCardSecondary: Contrasts['grey1111']
+  surfaceDark: Contrasts['grey100100']
+
+  textTitle: Contrasts['grey125125']
+  textDescription: Contrasts['grey125125']
+  textBody: Contrasts['grey125125']
+  textTimestamp: Contrasts['grey5782']
+  textAuthor: Contrasts['grey5782']
+  textDatapoint: Contrasts['grey5782']
+  textLink: Contrasts['blue4570']
+  textPlaceholder: Contrasts['grey2424']
+  textSuccess: Contrasts['green4570']
+  textWarning: Contrasts['orange4570']
+  textError: Contrasts['red4570']
+
+  lineStroke: Contrasts['grey1424']
+  lineDivider: Contrasts['grey1214']
+
+  surfaceOverlayGrey: Contrasts['grey100100op75']
+  surfaceOverlayWhite: Contrasts['white1010op75']
+  surfaceDivider: Contrasts['grey1424']
 }
 
 type Colors = {
-  values: BaseColors
-  text: TextColors
-  background: BackgroundColors
-  border: BorderColors
-  brand: string
-  link: string
-  electric: string
-  shamrock: string
-  barney: string
-  crimson: string
-  fire: string
-  licorice: string
-  oxford: string
-  ash: string
-  slate: string
-  tiara: string
-  porcelain: string
-  white: string
-  borderLightest: BaseColors['white']
-  borderLight: BaseColors['porcelain']
-  borderMedium: BaseColors['tiara']
-  borderDark: BaseColors['ash']
-  borderDarkest: BaseColors['licorice']
-  borderBrand: BaseColors['brand']
-  borderAlert: BaseColors['barney']
-  borderInfo: BaseColors['brand']
-  borderSuccess: BaseColors['shamrock']
-  borderDanger: BaseColors['crimson']
-  borderWarning: BaseColors['fire']
-  borderDebug: BaseColors['crimson']
-  backgroundDarkest: BaseColors['licorice']
-  backgroundDark: BaseColors['ash']
-  backgroundMedium: BaseColors['tiara']
-  backgroundLight: BaseColors['porcelain']
-  backgroundLightest: BaseColors['white']
-  backgroundBrand: BaseColors['brand']
-  backgroundBrandSecondary: BaseColors['oxford']
-  backgroundAlert: BaseColors['barney']
-  backgroundInfo: BaseColors['brand']
-  backgroundSuccess: BaseColors['shamrock']
-  backgroundDanger: BaseColors['crimson']
-  backgroundWarning: BaseColors['fire']
-  textDarkest: BaseColors['licorice']
-  textDark: BaseColors['ash']
-  textLight: BaseColors['porcelain']
-  textLightest: BaseColors['white']
-  textBrand: BaseColors['brand']
-  textLink: BaseColors['link']
-  textAlert: BaseColors['barney']
-  textInfo: BaseColors['brand']
-  textSuccess: BaseColors['shamrock']
-  textDanger: BaseColors['crimson']
-  textWarning: BaseColors['fire']
+  primitives: Primitives
+  contrasts: Contrasts
+  ui: UI
 }
 
-export type { BaseColors, TextColors, BorderColors, BackgroundColors, Colors }
+export type { Colors, Primitives, Contrasts, UI }

package/src/CommonTypes.ts

@@ -87,3 +87,5 @@ export interface InstUIComponent
     InstUIBaseComponent {
   originalType?: any
 }
+
+export type Themes = 'contrast45' | 'contrast70'