Skip to content

Commit

Permalink
Add color scheme for heading text color (#1442)
Browse files Browse the repository at this point in the history
* Add color scheme for heading text color

* added rush change

* added headingBase
Andrewleel authored Jan 30, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 1ccb363 commit 595f346
Showing 5 changed files with 44 additions and 12 deletions.
10 changes: 10 additions & 0 deletions common/changes/pcln-design-system/AIR-60645_2024-01-26-19-56.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "pcln-design-system",
"comment": "Add color scheme for heading text color",
"type": "patch"
}
],
"packageName": "pcln-design-system"
}
4 changes: 4 additions & 0 deletions packages/core/src/Heading/Heading.stories.tsx
Original file line number Diff line number Diff line change
@@ -61,5 +61,9 @@ export const ColorSchemes = () => (
<Heading.h1 colorScheme='primary'>Heading Left</Heading.h1>
<Heading.h2 colorScheme='secondaryLight'>Heading Left</Heading.h2>
<Heading.h3 colorScheme='cautionLight'>Heading Left</Heading.h3>
<Heading.h4 colorScheme='heading'>Heading Left</Heading.h4>
<Heading.h4 colorScheme='headingBase'>Heading Left</Heading.h4>
<Heading.h5 colorScheme='headingLight'>Heading Left</Heading.h5>
<Heading.h6 colorScheme='headingOnPrimaryLight'>Heading Left</Heading.h6>
</section>
)
1 change: 1 addition & 0 deletions packages/core/src/stories/Colors.stories.tsx
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@ const colorSchemeFamilies = [
'Highlight',
'Promo',
'Alert',
'Heading'
]

const ColorCard = (props) => (
4 changes: 4 additions & 0 deletions packages/core/src/theme/theme.ts
Original file line number Diff line number Diff line change
@@ -607,6 +607,10 @@ export const colorSchemeNames = [
'alertLight',
'alertLightest',
'alertDarkOnLight',
'heading',
'headingBase',
'headingLight',
'headingOnPrimaryLight',
] as const

/** @public */
37 changes: 25 additions & 12 deletions packages/core/src/utils/createColorScheme.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
import { ColorSchemes, PaletteFamilies } from '../theme'

export const createColorScheme = ({ palette }: { palette: PaletteFamilies }): ColorSchemes => {
const {
primary,
secondary,
background,
success,
warning,
caution,
text,
highlight,
promoPrimary,
alert,
} = palette
const { primary, secondary, background, success, warning, caution, text, highlight, promoPrimary, alert } =
palette

return {
// Primary
@@ -221,5 +211,28 @@ export const createColorScheme = ({ palette }: { palette: PaletteFamilies }): Co
backgroundName: 'alert.light',
foreground: alert.tone,
},

// Heading
//////////////////////////////////////////////
heading: {
background: background.lightest,
backgroundName: 'background.lightest',
foreground: text.heading,
},
headingBase: {
background: background.base,
backgroundName: 'background.base',
foreground: text.heading,
},
headingLight: {
background: background.light,
backgroundName: 'background.light',
foreground: text.heading,
},
headingOnPrimaryLight: {
background: primary.light,
backgroundName: 'primary.light',
foreground: text.heading,
},
}
}

0 comments on commit 595f346

Please sign in to comment.