Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history
commit bf4f587
Author: Katie George <[email protected]>
Date:   Fri Nov 1 13:59:33 2024 -0700

    chore: Adds comments and removes unused yellow token

commit 2f652e3
Author: Katie George <[email protected]>
Date:   Thu Oct 31 14:25:13 2024 -0700

    fix: Removes public tokens and updates neutral to grey 550

commit 0be3c07
Author: Katie George <[email protected]>
Date:   Wed Oct 30 11:54:05 2024 -0700

    fix: Updates snapshots

commit e90d96c
Author: Katie George <[email protected]>
Date:   Wed Oct 30 11:50:15 2024 -0700

    fix: Updates text colors to also be in severity color palette

commit 4262ffa
Author: Katie George <[email protected]>
Date:   Wed Oct 30 11:23:57 2024 -0700

    fix: Updates color names and uncomments code

commit 07fa96b
Author: Katie George <[email protected]>
Date:   Tue Oct 29 14:09:47 2024 -0700

    wip: Moves to severity palette

commit 0f95580
Author: Katie George <[email protected]>
Date:   Tue Oct 29 11:25:18 2024 -0700

    wip: adds severity palette colors

commit 37f88f6
Author: Katie George <[email protected]>
Date:   Fri Oct 25 13:56:11 2024 -0700

    feat: Removes 400 and makes 500

commit 1258631
Author: Katie George <[email protected]>
Date:   Fri Oct 25 13:42:41 2024 -0700

    feat: Updates severity low and medium colors
  • Loading branch information
Katie George committed Nov 13, 2024
1 parent a89976c commit 187ae8f
Show file tree
Hide file tree
Showing 13 changed files with 1,292 additions and 114 deletions.
160 changes: 80 additions & 80 deletions src/__integ__/__snapshots__/themes.test.ts.snap

Large diffs are not rendered by default.

1,050 changes: 1,050 additions & 0 deletions src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions src/badge/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,27 +37,27 @@
}

&.badge-color-severity-critical {
background-color: awsui.$color-background-severity-critical;
color: awsui.$color-text-severity-critical;
background-color: awsui.$color-background-notification-severity-critical;
color: awsui.$color-text-notification-severity-critical;
}

&.badge-color-severity-high {
background-color: awsui.$color-background-severity-high;
color: awsui.$color-text-severity-high;
background-color: awsui.$color-background-notification-severity-high;
color: awsui.$color-text-notification-severity-high;
}

&.badge-color-severity-medium {
background-color: awsui.$color-background-severity-medium;
color: awsui.$color-text-severity-medium;
background-color: awsui.$color-background-notification-severity-medium;
color: awsui.$color-text-notification-severity-medium;
}

&.badge-color-severity-low {
background-color: awsui.$color-background-severity-low;
color: awsui.$color-text-severity-low;
background-color: awsui.$color-background-notification-severity-low;
color: awsui.$color-text-notification-severity-low;
}

&.badge-color-severity-neutral {
background-color: awsui.$color-background-severity-neutral;
color: awsui.$color-text-severity-neutral;
background-color: awsui.$color-background-notification-severity-neutral;
color: awsui.$color-text-notification-severity-neutral;
}
}
19 changes: 19 additions & 0 deletions style-dictionary/classic/color-severity.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import merge from 'lodash/merge';

import { expandColorDictionary } from '../utils';
import { StyleDictionary } from '../utils/interfaces';
import { tokens as parentTokens } from '../visual-refresh/color-severity';

const tokens: StyleDictionary.ColorSeverityDictionary = {
colorTextNotificationSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey900}' },
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
{},
parentTokens,
expandColorDictionary(tokens)
);
export { expandedTokens as tokens };
export const mode: StyleDictionary.ModeIdentifier = 'color';
1 change: 0 additions & 1 deletion style-dictionary/classic/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorDragPlaceholderActive: { light: '{colorGrey300}', dark: '{colorGrey550}' },
colorDragPlaceholderHover: { light: '{colorBlue300}', dark: '{colorBlue600}' },
colorBackgroundDropdownItemHover: { light: '{colorGrey150}', dark: '{colorGrey650}' },
colorTextSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey900}' },
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
Expand Down
1 change: 1 addition & 0 deletions style-dictionary/classic/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const modes = [
const tokenCategories = [
require('./color-palette'),
require('./color-charts'),
require('./color-severity'),
require('./colors'),
require('./typography'),
require('./borders'),
Expand Down
2 changes: 2 additions & 0 deletions style-dictionary/utils/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
ColorChartsTokenName,
ColorPaletteTokenName,
ColorScopeTokenName,
ColorSeverityTokenName,
ColorsTokenName,
DensityScopeTokenName,
GlobalScopeTokenName,
Expand Down Expand Up @@ -47,6 +48,7 @@ export namespace StyleDictionary {
export type TypographyDictionary = Partial<TokenCategory<TypographyTokenName, GlobalEntry>>;
export type BordersDictionary = Partial<TokenCategory<BordersTokenName, GlobalEntry>>;
export type ColorChartsDictionary = Partial<TokenCategory<ColorChartsTokenName, ColorModeEntry>>;
export type ColorSeverityDictionary = Partial<TokenCategory<ColorSeverityTokenName, ColorModeEntry>>;
export type ColorsDictionary = Partial<TokenCategory<ColorsTokenName, ColorModeEntry>>;
export type ShadowsDictionary = Partial<TokenCategory<ShadowsTokenName, ColorModeEntry>>;

Expand Down
30 changes: 18 additions & 12 deletions style-dictionary/utils/token-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,22 @@ export type ColorChartsTokenName =
| 'colorChartsPaletteCategorical48'
| 'colorChartsPaletteCategorical49'
| 'colorChartsPaletteCategorical50';
export type ColorSeverityTokenName =
| 'colorSeverityDarkRed'
| 'colorSeverityRed'
| 'colorSeverityOrange'
| 'colorSeverityYellow'
| 'colorSeverityGrey'
| 'colorBackgroundNotificationSeverityCritical'
| 'colorBackgroundNotificationSeverityHigh'
| 'colorBackgroundNotificationSeverityMedium'
| 'colorBackgroundNotificationSeverityLow'
| 'colorBackgroundNotificationSeverityNeutral'
| 'colorTextNotificationSeverityCritical'
| 'colorTextNotificationSeverityHigh'
| 'colorTextNotificationSeverityMedium'
| 'colorTextNotificationSeverityLow'
| 'colorTextNotificationSeverityNeutral';
export type ColorsTokenName =
| 'colorGreyOpaque10'
| 'colorGreyOpaque25'
Expand Down Expand Up @@ -472,17 +488,7 @@ export type ColorsTokenName =
| 'colorDropzoneTextDefault'
| 'colorDropzoneTextHover'
| 'colorDropzoneBorderDefault'
| 'colorDropzoneBorderHover'
| 'colorBackgroundSeverityCritical'
| 'colorTextSeverityCritical'
| 'colorBackgroundSeverityHigh'
| 'colorTextSeverityHigh'
| 'colorBackgroundSeverityMedium'
| 'colorTextSeverityMedium'
| 'colorBackgroundSeverityLow'
| 'colorTextSeverityLow'
| 'colorBackgroundSeverityNeutral'
| 'colorTextSeverityNeutral';
| 'colorDropzoneBorderHover';
export type TypographyTokenName =
| 'fontBoxValueLargeWeight'
| 'fontButtonLetterSpacing'
Expand Down Expand Up @@ -744,7 +750,7 @@ export type ShadowsTokenName =
| 'shadowStickyColumnLast';

export type GlobalScopeTokenName = ColorPaletteTokenName | TypographyTokenName | BordersTokenName;
export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName;
export type ColorScopeTokenName = ColorChartsTokenName | ColorsTokenName | ShadowsTokenName | ColorSeverityTokenName;
export type MotionScopeTokenName = MotionTokenName;
export type DensityScopeTokenName = SizesTokenName | SpacingTokenName;

Expand Down
30 changes: 30 additions & 0 deletions style-dictionary/visual-refresh/color-severity.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { expandColorDictionary } from '../utils';
import { StyleDictionary } from '../utils/interfaces';

const tokens: StyleDictionary.ColorSeverityDictionary = {
// note: these should not be used directly. Instead, use the semantic tokens defined below.
colorSeverityDarkRed: { light: '#870303', dark: '#d63f38' },
colorSeverityRed: { light: '#ce3311', dark: '#fe6e73' },
colorSeverityOrange: { light: '#f89256', dark: '#f89256' },
colorSeverityYellow: { light: '#f2cd54', dark: '#f2cd54' },
colorSeverityGrey: '{colorGrey550}',

colorBackgroundNotificationSeverityCritical: '{colorSeverityDarkRed}',
colorBackgroundNotificationSeverityHigh: '{colorSeverityRed}',
colorBackgroundNotificationSeverityMedium: '{colorSeverityOrange}',
colorBackgroundNotificationSeverityLow: '{colorSeverityYellow}',
colorBackgroundNotificationSeverityNeutral: '{colorSeverityGrey}',

colorTextNotificationSeverityCritical: { light: '{colorGrey100}', dark: '{colorBlack}' },
colorTextNotificationSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey900}' },
colorTextNotificationSeverityMedium: '{colorGrey900}',
colorTextNotificationSeverityLow: '{colorGrey900}',
colorTextNotificationSeverityNeutral: '{colorGrey100}',
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

export { expandedTokens as tokens };
export const mode: StyleDictionary.ModeIdentifier = 'color';
10 changes: 0 additions & 10 deletions style-dictionary/visual-refresh/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -268,16 +268,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorDropzoneTextHover: { light: '{colorGrey600}', dark: '{colorGrey350}' },
colorDropzoneBorderDefault: { light: '{colorGrey500}', dark: '{colorGrey550}' },
colorDropzoneBorderHover: { light: '{colorBlue800}', dark: '{colorBlue400}' },
colorBackgroundSeverityCritical: '{colorChartsStatusCritical}',
colorTextSeverityCritical: { light: '{colorGrey100}', dark: '{colorBlack}' },
colorBackgroundSeverityHigh: '{colorChartsStatusHigh}',
colorTextSeverityHigh: { light: '{colorGrey100}', dark: '{colorGrey900}' },
colorBackgroundSeverityMedium: '{colorChartsStatusMedium}',
colorTextSeverityMedium: '{colorGrey900}',
colorBackgroundSeverityLow: '{colorChartsStatusLow}',
colorTextSeverityLow: '{colorGrey900}',
colorBackgroundSeverityNeutral: { light: '{colorGrey600}', dark: '{colorGrey550}' },
colorTextSeverityNeutral: '{colorGrey100}',
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
Expand Down
1 change: 1 addition & 0 deletions style-dictionary/visual-refresh/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const modes = [
const tokenCategories = [
require('./color-palette'),
require('./color-charts'),
require('./color-severity'),
require('./colors'),
require('./typography'),
require('./borders'),
Expand Down
66 changes: 66 additions & 0 deletions style-dictionary/visual-refresh/metadata/color-severity.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { StyleDictionary } from '../../utils/interfaces';

const metadata: StyleDictionary.MetadataIndex = {
colorBackgroundNotificationSeverityCritical: {
description:
'Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
public: true,
themeable: true,
},
colorBackgroundNotificationSeverityHigh: {
description:
'Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"',
public: true,
themeable: true,
},
colorBackgroundNotificationSeverityMedium: {
description: 'Background color in a notification to represent a medium-level of severity. For example: "Sev-3"',
public: true,
themeable: true,
},
colorBackgroundNotificationSeverityLow: {
description:
'Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
public: true,
themeable: true,
},
colorBackgroundNotificationSeverityNeutral: {
description:
'Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
public: true,
themeable: true,
},
colorTextNotificationSeverityCritical: {
description:
'Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
public: true,
themeable: true,
},
colorTextNotificationSeverityHigh: {
description:
'Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"',
public: true,
themeable: true,
},
colorTextNotificationSeverityMedium: {
description: 'Text color in a notification to represent a medium-level of severity. For example: "Sev-3"',
public: true,
themeable: true,
},
colorTextNotificationSeverityLow: {
description:
'Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
public: true,
themeable: true,
},
colorTextNotificationSeverityNeutral: {
description:
'Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
public: true,
themeable: true,
},
};

export default metadata;
16 changes: 15 additions & 1 deletion style-dictionary/visual-refresh/metadata/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import theme from '../index';
import borders from './borders';
import colorCharts from './color-charts';
import colorPalette from './color-palette';
import colorSeverity from './color-severity';
import colors from './colors';
import motion from './motion';
import shadows from './shadows';
Expand All @@ -19,6 +20,19 @@ import typography from './typography';
const allTokens = mapValues(theme.tokens, () => ({}));

const metadata: StyleDictionary.MetadataIndex = expandMetadata(
merge({}, allTokens, borders, colorCharts, colorPalette, colors, motion, shadows, sizes, spacing, typography)
merge(
{},
allTokens,
borders,
colorCharts,
colorSeverity,
colorPalette,
colors,
motion,
shadows,
sizes,
spacing,
typography
)
);
export default metadata;

0 comments on commit 187ae8f

Please sign in to comment.