From 7219606144114fd4bf4048177dfe31ee81de76d9 Mon Sep 17 00:00:00 2001
From: Toppanto Bence <bence.toppanto@instructure.com>
Date: Wed, 31 Jul 2024 15:52:53 +0200
Subject: [PATCH] feat(shared-types,ui-theme-tokens): add transparent colors to
 the palette

---
 package-lock.json                                  |  3 ++-
 packages/shared-types/src/Colors.ts                | 14 ++++++++++++--
 packages/ui-theme-tokens/src/canvas/colors.ts      |  2 ++
 .../src/canvasHighContrast/colors.ts               |  2 ++
 .../ui-theme-tokens/src/common/colors/primitves.ts |  2 ++
 packages/ui-theme-tokens/src/utils/getUIColors.ts  | 12 ++++++++----
 6 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0780ea5278..5163256171 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39886,6 +39886,7 @@
     "packages/instructure-theme": {
       "name": "@instructure/instructure-theme",
       "version": "9.5.1",
+      "extraneous": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.24.5",
@@ -49391,4 +49392,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/shared-types/src/Colors.ts b/packages/shared-types/src/Colors.ts
index a45282d95a..5ec537a879 100644
--- 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,6 +66,8 @@ type Primitives = {
 
 type Contrasts = {
   white1010: Primitives['white']
+  white1010op75: Primitives['white10op75']
+
   grey1111: Primitives['grey11']
   grey1214: Primitives['grey12'] | Primitives['grey14']
   grey1424: Primitives['grey14'] | Primitives['grey24']
@@ -70,6 +75,7 @@ type Contrasts = {
   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
index 7e1dacef68..5874fcf19c 100644
--- 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
index 4863658fda..fd703e55cb 100644
--- 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
index 28f86157c1..78845d85da 100644
--- 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
index aae53724fa..f62efc7e98 100644
--- 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