added 2 more custom colors

etn-ccis · Dec 5, 2023 · 0f78156 · 0f78156
1 parent 2143306
commit 0f78156
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts
@@ -40,7 +40,7 @@ export const MD3BluiDarkTheme = {
         surfaceVariant: BLUIColors.neutralVariant[30],
         onSurfaceVariant: BLUIColors.neutralVariant[70],
         outline: BLUIColors.neutralVariant[60],
-        outlineVariant: Color(BLUIColors.neutralVariant[60]).alpha(0.25),
+        outlineVariant: Color(BLUIColors.neutralVariant[60]).alpha(0.25).rgb().string(),
         shadow: BLUIColors.primary[0],
         scrim: BLUIColors.primary[0],
         inverseSurface: BLUIColors.neutral[90],
@@ -61,7 +61,7 @@ export const MD3BluiDarkTheme = {
         // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
         errorNonText: BLUIColors.error[60],
         // variant used to render disabled elements
-        disabled: Color(BLUIColors.neutral[90]).alpha(0.2),
+        disabled: Color(BLUIColors.neutral[90]).alpha(0.2).rgb().string(),
         // warning variant fills, texts, and icons which communicate warning states
         warning: BLUIColors.warning[90],
         // can be used on non-text warning elements like icons
@@ -113,5 +113,8 @@ export const MD3BluiDarkTheme = {
         surfaceContainerHigh: BLUIColors.neutral[17],
         // Highest-emphasis container color
         surfaceContainerHighest: BLUIColors.neutral[20],
+
+        onDisabledContainer: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(),
+        disabledContainer: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
     },
 };
diff --git a/src/blueTheme.ts b/src/blueTheme.ts
@@ -40,7 +40,7 @@ export const MD3BluiLightTheme = {
         surfaceVariant: BLUIColors.neutralVariant[90],
         onSurfaceVariant: BLUIColors.neutralVariant[30],
         outline: BLUIColors.neutralVariant[50],
-        outlineVariant: Color(BLUIColors.neutralVariant[50]).alpha(0.25),
+        outlineVariant: Color(BLUIColors.neutralVariant[50]).alpha(0.25).rgb().string(),
         shadow: BLUIColors.primary[0],
         scrim: BLUIColors.primary[0],
         inverseSurface: BLUIColors.neutral[20],
@@ -61,7 +61,7 @@ export const MD3BluiLightTheme = {
         // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
         errorNonText: BLUIColors.error[50],
         // variant used to render disabled elements
-        disabled: Color(BLUIColors.neutral[10]).alpha(0.2),
+        disabled: Color(BLUIColors.neutral[10]).alpha(0.2).rgb().string(),
         // warning variant fills, texts, and icons which communicate warning states
         warning: BLUIColors.warning[40],
         // can be used on non-text warning elements like icons
@@ -113,5 +113,8 @@ export const MD3BluiLightTheme = {
         surfaceContainerHigh: BLUIColors.neutral[92],
         // Highest-emphasis container color
         surfaceContainerHighest: BLUIColors.neutral[90],
+
+        onDisabledContainer: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(),
+        disabledContainer: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
     },
 };