feat(shared-types,ui-theme-tokens): add transparent colors to the pal…

…ette
instructure · Jul 31, 2024 · 7219606 · 7219606
1 parent 91eb1ee
commit 7219606
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/shared-types/src/Colors.ts b/packages/shared-types/src/Colors.ts
@@ -24,6 +24,8 @@
 
 type Primitives = {
   white: string
+  white10op75: string
+
   grey11: string
   grey12: string
   grey14: string
@@ -33,6 +35,7 @@ type Primitives = {
   grey70: string
   grey82: string
   grey100: string
+  grey100op75: string
   grey125: string
 
   blue12: string
@@ -63,13 +66,16 @@ type Primitives = {
 
 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']
@@ -109,8 +115,12 @@ type UI = {
   textWarning: Contrasts['orange4570']
   textError: Contrasts['red4570']
 
-  stroke: Contrasts['grey1424']
-  divider: Contrasts['grey1214']
+  lineStroke: Contrasts['grey1424']
+  lineDivider: Contrasts['grey1214']
+
+  surfaceOverlayGrey: Contrasts['grey100100op75']
+  surfaceOverlayWhite: Contrasts['white1010op75']
+  surfaceDivider: Contrasts['grey1424']
 }
 
 type Colors = {

diff --git a/packages/ui-theme-tokens/src/canvas/colors.ts b/packages/ui-theme-tokens/src/canvas/colors.ts
@@ -29,6 +29,7 @@ import type { Colors, Contrasts, UI } from '@instructure/shared-types'
 
 const contrasts: Contrasts = {
   white1010: primitives.white,
+  white1010op75: primitives.white10op75,
 
   grey1111: primitives.grey11,
   grey1214: primitives.grey12,
@@ -37,6 +38,7 @@ const contrasts: Contrasts = {
   grey4570: primitives.grey45,
   grey5782: primitives.grey57,
   grey100100: primitives.grey100,
+  grey100100op75: primitives.grey100op75,
   grey125125: primitives.grey125,
 
   blue1212: primitives.blue12,

diff --git a/packages/ui-theme-tokens/src/canvasHighContrast/colors.ts b/packages/ui-theme-tokens/src/canvasHighContrast/colors.ts
@@ -29,6 +29,7 @@ import type { UI, Contrasts } from '@instructure/shared-types'
 
 const contrasts: Contrasts = {
   white1010: primitives.white,
+  white1010op75: primitives.white10op75,
 
   grey1111: primitives.grey11,
   grey1214: primitives.grey14,
@@ -37,6 +38,7 @@ const contrasts: Contrasts = {
   grey4570: primitives.grey70,
   grey5782: primitives.grey82,
   grey100100: primitives.grey100,
+  grey100100op75: primitives.grey100op75,
   grey125125: primitives.grey125,
 
   blue1212: primitives.blue12,

diff --git a/packages/ui-theme-tokens/src/common/colors/primitves.ts b/packages/ui-theme-tokens/src/common/colors/primitves.ts
@@ -26,6 +26,7 @@ import { Primitives } from '@instructure/shared-types'
 
 const primitives: Primitives = {
   white: '#FFFFFF',
+  white10op75: '#FFFFFFBF',
 
   grey11: '#F2F4F4',
   grey12: '#E8EAEC',
@@ -36,6 +37,7 @@ const primitives: Primitives = {
   grey70: '#4A5B68',
   grey82: '#3F515E',
   grey100: '#334451',
+  grey100op75: '#334451BF',
   grey125: '#273540',
 
   blue12: '#E0EBF5',

diff --git a/packages/ui-theme-tokens/src/utils/getUIColors.ts b/packages/ui-theme-tokens/src/utils/getUIColors.ts
@@ -22,9 +22,9 @@
  * SOFTWARE.
  */
 
-import type { Contrasts } from '@instructure/shared-types'
+import type { Contrasts, UI } from '@instructure/shared-types'
 
-export const getUIColors = (contrasts: Contrasts) => ({
+export const getUIColors = (contrasts: Contrasts): UI => ({
   surfacePagePrimary: contrasts?.white1010,
   surfacePageSecondary: contrasts?.grey1111,
   surfaceCardPrimary: contrasts?.white1010,
@@ -43,8 +43,12 @@ export const getUIColors = (contrasts: Contrasts) => ({
   textWarning: contrasts?.orange4570,
   textError: contrasts?.red4570,
 
-  stroke: contrasts?.grey1424,
-  divider: contrasts?.grey1214
+  lineStroke: contrasts?.grey1424,
+  lineDivider: contrasts?.grey1214,
+
+  surfaceOverlayGrey: contrasts?.grey100100op75,
+  surfaceOverlayWhite: contrasts?.white1010op75,
+  surfaceDivider: contrasts?.grey1424
 })
 
 export default getUIColors