Skip to content

Commit

Permalink
Merge pull request #69 from etn-ccis/feature/4987-add-status-color-wi…
Browse files Browse the repository at this point in the history 
…th-container

add status colors with containers
  • Loading branch information
@ektaghag-eaton
ektaghag-eaton authored Dec 20, 2023
2 parents 63155ba + 1256a2b commit 227d92a
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 8 deletions.
86 changes: 85 additions & 1 deletion src/blueDarkTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,11 +119,95 @@ export const MD3BluiDarkTheme = {
surfaceContainerHighest: BLUIColors.neutral[20],
// This is alias for surface disabled, used as disabled container background
disabledContainer: Color(BLUIColors.neutral[95]).alpha(0.1).rgb().string(),
// Text and icons against disabled container
// Text and icons against disable container
onDisabledContainer: Color(BLUIColors.neutral[95]).alpha(0.15).rgb().string(),
// Can be used on slider and range selector track
sliderTrack: BLUIColors.neutral[30],
// Disabled version of slider track color variant
sliderTrackDisabled: Color(BLUIColors.neutral[30]).alpha(0.5).rgb().string(),
// Attention-grabbing color against error filled surface
errorFilledContainer: BLUIColors.error[40],
// Text and icons against error filled container
onErrorFilledContainer: BLUIColors.error[100],
// Attention-grabbing color against error shaded surface
errorShadedContainer: Color(BLUIColors.error[40]).alpha(0.3).rgb().string(),
// Text and icons against error shaded container
onErrorShadedContainer: BLUIColors.error[80],
// Attention-grabbing color against error outlined container
errorOutlinedContainerOutline: BLUIColors.error[60],
// Text and icons against error outlined container
onErrorOutlinedContainerOutline: BLUIColors.error[80],
// Orange color against orange filled surface
orangeFilledContainer: BLUIColors.orange[70],
// Text and icons against orange filled container
onOrangeFilledContainer: BLUIColors.orange[20],
// Orange color against orange shaded surface
orangeShadedContainer: Color(BLUIColors.orange[70]).alpha(0.15).rgb().string(),
// Text and icons against orange shaded container
onOrangeShadedContainer: BLUIColors.orange[80],
// Orange color against orange outlined surface
orangeOutlinedContainer: BLUIColors.orange[70],
// Text and icons against orange outlined container
onOrangeOutlinedContainer: BLUIColors.orange[80],
// Warning color against warning filled surface
warningFilledContainer: BLUIColors.warning[80],
// Text and icons against warning filled container
onWarningFilledContainer: BLUIColors.warning[30],
// Warning color against warning shaded surface
warningShadedContainer: Color(BLUIColors.warning[90]).alpha(0.1).rgb().string(),
// Text and icons against warning shaded container
onWarningShadedContainer: BLUIColors.warning[90],
// Warning color against warning outlined container surface
warningOutlinedContainerOutline: BLUIColors.warning[90],
// Text and icons against warning outlined container surface
onWarningOutlinedContainer: BLUIColors.warning[90],
// Attention-grabbing color against success filled container
successFilledContainer: BLUIColors.success[50],
// Text and icons against success filled container
onSuccessFilledContainer: BLUIColors.success[100],
// Attention-grabbing color against success shaded surface
successShadedContainer: Color(BLUIColors.success[40]).alpha(0.3).rgb().string(),
// Attention-grabbing label color against success shaded surface
successShadedLabel: BLUIColors.success[90],
// Attention-grabbing color against success container
successOutlinedContainerOutline: BLUIColors.success[70],
// Text and icons against success outlined container
onSuccessOutlinedContainer: BLUIColors.success[80],
// Primary color against primary filled surface
primaryFilledContainer: BLUIColors.primary[50],
// Text and icons against primary filled container
onPrimaryFilledContainer: BLUIColors.primary[100],
// Primary color against primary shaded surface
primaryShadedContainer: Color(BLUIColors.primary[40]).alpha(0.4).rgb().string(),
// Text and icons against primary shaded container
onPrimaryShadedContainer: BLUIColors.primary[80],
// Primary color against primary outlined container
primaryOutlinedContainerOutline: BLUIColors.primary[60],
// Text and icons against primary outlined container
onPrimaryOutlinedContainer: BLUIColors.primary[70],
// Purple color against purple filled surface
purpleFilledContainer: BLUIColors.purple[50],
// Text and icons against purple filled container
onPurpleFilledContainer: BLUIColors.purple[100],
// Purple color against purple shaded surface
purpleShadedContainer: Color(BLUIColors.purple[40]).alpha(0.4).rgb().string(),
// Text and icons against purple shaded container
onPurpleShadedContainer: BLUIColors.purple[80],
// Purple color against purple outlined container
purpleOutlinedContainerOutline: BLUIColors.purple[50],
// Text and icons against purple outlined container
onPurpleOutlinedContainer: BLUIColors.purple[70],
// Neutral color against neutral filled surface
neutralFilledContainer: BLUIColors.neutral[50],
// Text and icons against neutral filled container
onNeutralFilledContainer: BLUIColors.neutral[100],
// Neutral color against neutral shaded surface
neutralShadedContainer: Color(BLUIColors.neutral[50]).alpha(0.4).rgb().string(),
// Text and icons against neutral shaded container
onNeutralShadedContainer: BLUIColors.neutral[80],
// Neutral color against neutral outlined container
neutralOutlinedContainerOutline: BLUIColors.neutralVariant[60],
// Text and icons against Neutral outlined container
onNeutralOutlinedContainer: BLUIColors.neutralVariant[70],
},
};
86 changes: 85 additions & 1 deletion src/blueTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,11 +119,95 @@ export const MD3BluiLightTheme = {
surfaceContainerHighest: BLUIColors.neutral[90],
// This is alias for surface disabled, used as disabled container background
disabledContainer: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
// Text and icons against disabled container
// Text and icons against disable container
onDisabledContainer: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(),
// Can be used on slider and range selector track
sliderTrack: BLUIColors.neutral[80],
// Disabled version of slider track color variant
sliderTrackDisabled: Color(BLUIColors.neutral[80]).alpha(0.3).rgb().string(),
// Attention-grabbing color against error filled surface
errorFilledContainer: BLUIColors.error[40],
// Text and icons against error filled container
onErrorFilledContainer: BLUIColors.error[100],
// Attention-grabbing color against error shaded surface
errorShadedContainer: Color(BLUIColors.error[40]).alpha(0.15).rgb().string(),
// Text and icons against error shaded container
onErrorShadedContainer: BLUIColors.error[30],
// Attention-grabbing color against error outlined container
errorOutlinedContainerOutline: BLUIColors.error[40],
// Text and icons against error outlined container
onErrorOutlinedContainer: BLUIColors.error[40],
// Orange color against orange filled surface
orangeFilledContainer: BLUIColors.orange[70],
// Text and icons against orange filled container
onOrangeFilledContainer: BLUIColors.orange[20],
// Orange color against orange shaded surface
orangeShadedContainer: Color(BLUIColors.orange[70]).alpha(0.2).rgb().string(),
// Text and icons against orange shaded container
onOrangeShadedContainer: BLUIColors.orange[30],
// Orange color against orange outlined surface
orangeOutlinedContainer: BLUIColors.orange[70],
// Text and icons against orange outlined container
onOrangeOutlinedContainer: BLUIColors.orange[40],
// Warning color against warning filled surface
warningFilledContainer: BLUIColors.warning[90],
// Text and icons against warning filled container
onWarningFilledContainer: BLUIColors.warning[30],
// Warning color against warning shaded surface
warningShadedContainer: Color(BLUIColors.warning[90]).alpha(0.5).rgb().string(),
// Text and icons against warning shaded container
onWarningShadedContainer: BLUIColors.warning[30],
// Warning color against warning outlined container
warningOutlinedContainerOutline: BLUIColors.warning[80],
// Text and icons against warning outlined container
onWarningOutlinedContainer: BLUIColors.warning[40],
// Attention-grabbing color against success filled container
successFilledContainer: BLUIColors.success[50],
// Text and icons against success filled container
onSuccessFilledContainer: BLUIColors.success[100],
// Attention-grabbing color against success shaded surface
successShadedContainer: Color(BLUIColors.success[40]).alpha(0.15).rgb().string(),
// Attention-grabbing label color against success shaded surface
successShadedLabel: BLUIColors.success[30],
// Attention-grabbing color against success container
successOutlinedContainerOutline: BLUIColors.success[50],
// Text and icons against success outlined container
onSuccessOutlinedContainer: BLUIColors.success[40],
// Primary color against primary filled surface
primaryFilledContainer: BLUIColors.primary[50],
// Text and icons against primary filled container
onPrimaryFilledContainer: BLUIColors.primary[100],
// Primary color against primary shaded surface
primaryShadedContainer: Color(BLUIColors.primary[40]).alpha(0.15).rgb().string(),
// Text and icons against primary shaded container
onPrimaryShadedContainer: BLUIColors.primary[30],
// Primary color against primary outlined container
primaryOutlinedContainerOutline: BLUIColors.primary[50],
// Text and icons against primary outlined container
onPrimaryOutlinedContainer: BLUIColors.primary[40],
// Purple color against purple filled surface
purpleFilledContainer: BLUIColors.purple[50],
// Text and icons against purple filled container
onPurpleFilledContainer: BLUIColors.purple[100],
// Purple color against purple shaded surface
purpleShadedContainer: Color(BLUIColors.purple[40]).alpha(0.15).rgb().string(),
// Text and icons against purple shaded container
onPurpleShadedContainer: BLUIColors.purple[30],
// Purple color against purple outlined container
purpleOutlinedContainerOutline: BLUIColors.purple[50],
// Text and icons against purple outlined container
onPurpleOutlinedContainer: BLUIColors.purple[40],
// Neutral color against neutral filled surface
neutralFilledContainer: BLUIColors.neutral[50],
// Text and icons against neutral filled container
onNeutralFilledContainer: BLUIColors.neutral[100],
// Neutral color against neutral shaded surface
neutralShadedContainer: Color(BLUIColors.neutral[50]).alpha(0.2).rgb().string(),
// Text and icons against neutral shaded container
onNeutralShadedContainer: BLUIColors.neutral[30],
// Neutral color against neutral outlined container
neutralOutlinedContainerOutline: BLUIColors.neutralVariant[50],
// Text and icons against Neutral outlined container
onNeutralOutlinedContainer: BLUIColors.neutralVariant[30],
},
};
9 changes: 3 additions & 6 deletions src/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const fontConfig = {
},
};

export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
export type ExtendedTheme = Omit<MD3Theme, 'colors'> & {
colors: {
primary: string;
primaryContainer: string;
Expand Down Expand Up @@ -177,6 +177,8 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
surfaceContainerHighest: string;
disabledContainer: string;
onDisabledContainer: string;
sliderTrack: string;
sliderTrackDisabled: string;
errorFilledContainer: string;
onErrorFilledContainer: string;
errorShadedContainer: string;
Expand Down Expand Up @@ -219,11 +221,6 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
onNeutralShadedContainer: string;
neutralOutlinedContainerOutline: string;
onNeutralOutlinedContainer: string;
sliderTrack: string;
sliderTrackDisabled: string;
};
fonts: MD3Typescale & {
customVariant: MD3Type;
};
};

Expand Down

0 comments on commit 227d92a

Please sign in to comment.