diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss index 4cfeb6fff6..eb5f47e9f5 100644 --- a/packages/css/src/components/avatar/avatar.scss +++ b/packages/css/src/components/avatar/avatar.scss @@ -37,11 +37,6 @@ vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */ } -.ams-avatar--azure { - background-color: var(--ams-avatar-azure-background-color); - color: var(--ams-avatar-azure-color); -} - .ams-avatar--black { background-color: var(--ams-avatar-black-background-color); color: var(--ams-avatar-black-color); @@ -52,39 +47,39 @@ color: var(--ams-avatar-blue-color); } +.ams-avatar--dark-green { + background-color: var(--ams-avatar-dark-green-background-color); + color: var(--ams-avatar-dark-green-color); +} + .ams-avatar--green { background-color: var(--ams-avatar-green-background-color); color: var(--ams-avatar-green-color); } -.ams-avatar--lime { - background-color: var(--ams-avatar-lime-background-color); - color: var(--ams-avatar-lime-color); -} - -.ams-avatar--magenta { - background-color: var(--ams-avatar-magenta-background-color); - color: var(--ams-avatar-magenta-color); +.ams-avatar--grey-1 { + background-color: var(--ams-avatar-grey-1-background-color); + color: var(--ams-avatar-grey-1-color); } -.ams-avatar--neutral-20 { - background-color: var(--ams-avatar-neutral-20-background-color); - color: var(--ams-avatar-neutral-20-color); +.ams-avatar--grey-2 { + background-color: var(--ams-avatar-grey-2-background-color); + color: var(--ams-avatar-grey-2-color); } -.ams-avatar--neutral-40 { - background-color: var(--ams-avatar-neutral-40-background-color); - color: var(--ams-avatar-neutral-40-color); +.ams-avatar--grey-3 { + background-color: var(--ams-avatar-grey-3-background-color); + color: var(--ams-avatar-grey-3-color); } -.ams-avatar--neutral-60 { - background-color: var(--ams-avatar-neutral-60-background-color); - color: var(--ams-avatar-neutral-60-color); +.ams-avatar--light-blue { + background-color: var(--ams-avatar-light-blue-background-color); + color: var(--ams-avatar-light-blue-color); } -.ams-avatar--neutral-80 { - background-color: var(--ams-avatar-neutral-80-background-color); - color: var(--ams-avatar-neutral-80-color); +.ams-avatar--magenta { + background-color: var(--ams-avatar-magenta-background-color); + color: var(--ams-avatar-magenta-color); } .ams-avatar--orange { diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index 63416163b3..d53d17bede 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -12,11 +12,6 @@ padding-inline: var(--ams-badge-padding-inline); } -.ams-badge--azure { - background-color: var(--ams-badge-azure-background-color); - color: var(--ams-badge-azure-color); -} - .ams-badge--black { background-color: var(--ams-badge-black-background-color); color: var(--ams-badge-black-color); @@ -27,39 +22,39 @@ color: var(--ams-badge-blue-color); } +.ams-badge--dark-green { + background-color: var(--ams-badge-dark-green-background-color); + color: var(--ams-badge-dark-green-color); +} + .ams-badge--green { background-color: var(--ams-badge-green-background-color); color: var(--ams-badge-green-color); } -.ams-badge--lime { - background-color: var(--ams-badge-lime-background-color); - color: var(--ams-badge-lime-color); -} - -.ams-badge--magenta { - background-color: var(--ams-badge-magenta-background-color); - color: var(--ams-badge-magenta-color); +.ams-badge--grey-1 { + background-color: var(--ams-badge-grey-1-background-color); + color: var(--ams-badge-grey-1-color); } -.ams-badge--neutral-20 { - background-color: var(--ams-badge-neutral-20-background-color); - color: var(--ams-badge-neutral-20-color); +.ams-badge--grey-2 { + background-color: var(--ams-badge-grey-2-background-color); + color: var(--ams-badge-grey-2-color); } -.ams-badge--neutral-40 { - background-color: var(--ams-badge-neutral-40-background-color); - color: var(--ams-badge-neutral-40-color); +.ams-badge--grey-3 { + background-color: var(--ams-badge-grey-3-background-color); + color: var(--ams-badge-grey-3-color); } -.ams-badge--neutral-60 { - background-color: var(--ams-badge-neutral-60-background-color); - color: var(--ams-badge-neutral-60-color); +.ams-badge--light-blue { + background-color: var(--ams-badge-light-blue-background-color); + color: var(--ams-badge-light-blue-color); } -.ams-badge--neutral-80 { - background-color: var(--ams-badge-neutral-80-background-color); - color: var(--ams-badge-neutral-80-color); +.ams-badge--magenta { + background-color: var(--ams-badge-magenta-background-color); + color: var(--ams-badge-magenta-color); } .ams-badge--orange { diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss index 71877569f8..18775b6efa 100644 --- a/packages/css/src/components/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -151,6 +151,7 @@ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"]) + .ams-checkbox__label:hover .ams-checkbox__checkmark::after { + // TODO: this should be the (currently non-existent) dark red hover color border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color); } @@ -168,6 +169,7 @@ :is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked) + .ams-checkbox__label:hover .ams-checkbox__checkmark::after { + // TODO: this should be the (currently non-existent) dark red hover color background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color); } @@ -175,6 +177,7 @@ :is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate) + .ams-checkbox__label:hover .ams-checkbox__checkmark::after { + // TODO: this should be the (currently non-existent) dark red hover color background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color); } diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss index e19f30be63..0e6324b147 100644 --- a/packages/css/src/components/date-input/date-input.scss +++ b/packages/css/src/components/date-input/date-input.scss @@ -71,6 +71,7 @@ box-shadow: var(--ams-date-input-invalid-box-shadow); &:hover { + // TODO: this should be the (currently non-existent) dark red hover color box-shadow: var(--ams-date-input-invalid-hover-box-shadow); } } diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss index 27102085e4..6611d39fb6 100644 --- a/packages/css/src/components/password-input/password-input.scss +++ b/packages/css/src/components/password-input/password-input.scss @@ -53,6 +53,7 @@ box-shadow: var(--ams-password-input-invalid-box-shadow); &:hover { + // TODO: this should be the (currently non-existent) dark red hover color box-shadow: var(--ams-password-input-invalid-hover-box-shadow); } } diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index 9a60153556..3cb63237a6 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -130,6 +130,7 @@ // Invalid hover .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover { .ams-radio__circle { + // TODO: this should be the (currently non-existent) dark red hover color stroke: var(--ams-radio-circle-invalid-hover-stroke); } @@ -139,6 +140,7 @@ } .ams-radio__checked-indicator { + // TODO: this should be the (currently non-existent) dark red hover color fill: var(--ams-radio-checked-indicator-invalid-hover-fill); } } diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 43ea03ca62..3161bd7d06 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -50,6 +50,7 @@ box-shadow: var(--ams-search-field-input-invalid-box-shadow); &:hover { + // TODO: this should be the (currently non-existent) dark red hover color box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow); } } diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss index e253c0103e..e2bcb8cc07 100644 --- a/packages/css/src/components/spotlight/spotlight.scss +++ b/packages/css/src/components/spotlight/spotlight.scss @@ -7,16 +7,20 @@ background-color: var(--ams-spotlight-background-color); } -.ams-spotlight--azure { - background-color: var(--ams-spotlight-azure-background-color); +.ams-spotlight--blue { + background-color: var(--ams-spotlight-blue-background-color); } -.ams-spotlight--green { - background-color: var(--ams-spotlight-green-background-color); +.ams-spotlight--dark-blue { + background-color: var(--ams-spotlight-dark-blue-background-color); +} + +.ams-spotlight--dark-green { + background-color: var(--ams-spotlight-dark-green-background-color); } -.ams-spotlight--lime { - background-color: var(--ams-spotlight-lime-background-color); +.ams-spotlight--green { + background-color: var(--ams-spotlight-green-background-color); } .ams-spotlight--magenta { diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index ba165dcfc0..860e9d6bd9 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -55,6 +55,7 @@ box-shadow: var(--ams-text-area-invalid-box-shadow); &:hover { + // TODO: this should be the (currently non-existent) dark red hover color box-shadow: var(--ams-text-area-invalid-hover-box-shadow); } } diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index 934407a5f3..850c0f39b9 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -53,6 +53,7 @@ box-shadow: var(--ams-text-input-invalid-box-shadow); &:hover { + // TODO: this should be the (currently non-existent) dark red hover color box-shadow: var(--ams-text-input-invalid-hover-box-shadow); } } diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss index 2469c079e5..99f3accce1 100644 --- a/packages/css/src/components/time-input/time-input.scss +++ b/packages/css/src/components/time-input/time-input.scss @@ -72,6 +72,7 @@ box-shadow: var(--ams-time-input-invalid-box-shadow); &:hover { + // TODO: this should be the (currently non-existent) dark red hover color box-shadow: var(--ams-time-input-invalid-hover-box-shadow); } } diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx index b1dea71599..a103565e3d 100644 --- a/packages/react/src/Avatar/Avatar.tsx +++ b/packages/react/src/Avatar/Avatar.tsx @@ -11,16 +11,15 @@ import { Icon } from '../Icon' import { Image } from '../Image' export const avatarColors = [ - 'azure', 'black', 'blue', + 'dark-green', 'green', - 'lime', + 'grey-1', + 'grey-2', + 'grey-3', + 'light-blue', 'magenta', - 'neutral-20', - 'neutral-40', - 'neutral-60', - 'neutral-80', 'orange', 'purple', 'red', diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx index 58caa116bb..a059070d80 100644 --- a/packages/react/src/Badge/Badge.test.tsx +++ b/packages/react/src/Badge/Badge.test.tsx @@ -52,7 +52,7 @@ describe('Badge', () => { const component = container.querySelector(':only-child') - expect(component).toHaveClass('ams-badge--green') + expect(component).toHaveClass('ams-badge--dark-green') }) badgeColors.map((color) => diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index ecd9f3633d..3ccd0cb457 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -8,16 +8,15 @@ import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes } from 'react' export const badgeColors = [ - 'azure', 'black', 'blue', + 'dark-green', 'green', - 'lime', + 'grey-1', + 'grey-2', + 'grey-3', + 'light-blue', 'magenta', - 'neutral-20', - 'neutral-40', - 'neutral-60', - 'neutral-80', 'orange', 'purple', 'red', @@ -35,7 +34,7 @@ export type BadgeProps = { } & HTMLAttributes export const Badge = forwardRef( - ({ label, className, color = 'green', ...restProps }: BadgeProps, ref: ForwardedRef) => ( + ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef) => ( {label} diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx index cd2777bf37..c5b95b3111 100644 --- a/packages/react/src/Spotlight/Spotlight.tsx +++ b/packages/react/src/Spotlight/Spotlight.tsx @@ -7,7 +7,7 @@ import clsx from 'clsx' import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react' const defaultColor = 'purple' -export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const +export const spotlightColors = ['blue', 'dark-green', 'green', 'magenta', 'orange', 'yellow'] as const type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md index cec5539de2..d21c06d9ef 100644 --- a/proprietary/tokens/README.md +++ b/proprietary/tokens/README.md @@ -80,7 +80,7 @@ Examples: ```css :root { - --ams-brand-color-red-60: #ec0000; + --ams-color-primary-red: #ec0000; --ams-space-md: 1rem; --ams-aspect-ratio-wide: 4/3; --ams-border-width-lg: 0.1875rem; @@ -174,9 +174,8 @@ Use ‘dot notation’ or square brackets to access the tokens. ```tsx import tokens from "@amsterdam/design-system-tokens/dist/index.json" -const { ams } = tokens -const buttonBackgroundColor = ams.brand.color.blue['60'] -const rowGap = ams.space.md +const buttonBackgroundColor = tokens.ams.color["primary-blue"] +const rowGap = tokens.ams.space.md ``` Import and merge the compact tokens if you need them. @@ -187,7 +186,7 @@ Then you can use the tokens in scripting or css-in-js libraries. import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json" import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json" -const { ams } = { ...spaciousTokens, ...compactTokens } +const tokens = { ...spaciousTokens, ...compactTokens } ``` ## Usage in Figma diff --git a/proprietary/tokens/src/brand/ams/color.tokens.json b/proprietary/tokens/src/brand/ams/color.tokens.json index 356ab8ffd2..9648f33983 100644 --- a/proprietary/tokens/src/brand/ams/color.tokens.json +++ b/proprietary/tokens/src/brand/ams/color.tokens.json @@ -1,45 +1,21 @@ { "ams": { - "brand": { - "color": { - "azure": { - "60": { "value": "#009DE6" } - }, - "blue": { - "60": { "value": "#004699" }, - "80": { "value": "#003677" } - }, - "green": { - "60": { "value": "#00A03C" } - }, - "lime": { - "60": { "value": "#BED200" } - }, - "magenta": { - "60": { "value": "#E50082" } - }, - "neutral": { - "0": { "value": "#FFFFFF" }, - "20": { "value": "#D1D1D1" }, - "40": { "value": "#A4A4A4" }, - "60": { "value": "#767676" }, - "80": { "value": "#474747" }, - "100": { "value": "#181818" } - }, - "orange": { - "60": { "value": "#FF9100" } - }, - "purple": { - "60": { "value": "#A00078" } - }, - "red": { - "60": { "value": "#EC0000" }, - "80": { "value": "#B70000" } - }, - "yellow": { - "60": { "value": "#FFE600" } - } - } + "color": { + "primary-black": { "value": "#000000" }, + "primary-white": { "value": "#FFFFFF" }, + "primary-blue": { "value": "#004699" }, + "primary-red": { "value": "#EC0000" }, + "dark-blue": { "value": "#102E62" }, + "orange": { "value": "#FF9100" }, + "yellow": { "value": "#FFE600" }, + "green": { "value": "#BED200" }, + "dark-green": { "value": "#00A03C" }, + "blue": { "value": "#009DE6" }, + "purple": { "value": "#A00078" }, + "magenta": { "value": "#E50082" }, + "neutral-grey1": { "value": "#E8E8E8" }, + "neutral-grey2": { "value": "#BEBEBE" }, + "neutral-grey3": { "value": "#767676" } } } } diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json index 9c0d5d22d3..3b0bcf8dd5 100644 --- a/proprietary/tokens/src/common/ams/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json @@ -1,11 +1,11 @@ { "ams": { "link-appearance": { - "color": { "value": "{ams.brand.color.blue.60}" }, + "color": { "value": "{ams.color.primary-blue}" }, "text-decoration-thickness": { "value": "{ams.border.width.md}" }, "text-underline-offset": { "value": "0.3333em" }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" } + "color": { "value": "{ams.color.dark-blue}" } }, "regular": { "text-decoration-line": { "value": "underline" }, @@ -21,21 +21,21 @@ } }, "contrast": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "hover": { - "color": { "value": "{ams.brand.color.neutral.100}" } + "color": { "value": "{ams.color.primary-black}" } }, "visited": { - "color": { "value": "{ams.brand.color.neutral.100}" } + "color": { "value": "{ams.color.primary-black}" } } }, "inverse": { - "color": { "value": "{ams.brand.color.neutral.0}" }, + "color": { "value": "{ams.color.primary-white}" }, "hover": { - "color": { "value": "{ams.brand.color.neutral.0}" } + "color": { "value": "{ams.color.primary-white}" } }, "visited": { - "color": { "value": "{ams.brand.color.neutral.0}" } + "color": { "value": "{ams.color.primary-white}" } } } } diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json index bee034f1fd..97677d9a27 100644 --- a/proprietary/tokens/src/components/ams/accordion.tokens.json +++ b/proprietary/tokens/src/components/ams/accordion.tokens.json @@ -3,7 +3,7 @@ "accordion": { "gap": { "value": "{ams.space.md}" }, "button": { - "color": { "value": "{ams.brand.color.blue.60}" }, + "color": { "value": "{ams.color.primary-blue}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, @@ -15,7 +15,7 @@ "outline-offset": { "value": "{ams.focus.outline-offset}" } }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" } + "color": { "value": "{ams.color.dark-blue}" } } }, "panel": { diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json index d7857e68f1..66e0fe1747 100644 --- a/proprietary/tokens/src/components/ams/alert.tokens.json +++ b/proprietary/tokens/src/components/ams/alert.tokens.json @@ -1,23 +1,23 @@ { "ams": { "alert": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-white}" }, "border-width": { "value": "{ams.border.width.xl}" }, "border-style": { "value": "solid" }, "gap": { "value": "{ams.space.sm}" }, "padding-block": { "value": "{ams.space.md}" }, "padding-inline": { "value": "{ams.space.lg}" }, "error": { - "border-color": { "value": "{ams.brand.color.red.60}" } + "border-color": { "value": "{ams.color.primary-red}" } }, "info": { - "border-color": { "value": "{ams.brand.color.azure.60}" } + "border-color": { "value": "{ams.color.blue}" } }, "success": { - "border-color": { "value": "{ams.brand.color.green.60}" } + "border-color": { "value": "{ams.color.dark-green}" } }, "warning": { - "border-color": { "value": "{ams.brand.color.orange.60}" } + "border-color": { "value": "{ams.color.orange}" } }, "content": { "gap": { "value": "{ams.space.sm}" } diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json index 63727d204b..820b61132f 100644 --- a/proprietary/tokens/src/components/ams/avatar.tokens.json +++ b/proprietary/tokens/src/components/ams/avatar.tokens.json @@ -8,68 +8,64 @@ "line-height": { "value": "{ams.text.level.6.line-height}" }, "padding-block": { "value": "{ams.space.xs}" }, "padding-inline": { "value": "{ams.space.xs}" }, - "azure": { - "background-color": { "value": "{ams.brand.color.azure.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } - }, "black": { - "background-color": { "value": "{ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-white}" } }, "blue": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-white}" } }, - "green": { - "background-color": { "value": "{ams.brand.color.green.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "dark-green": { + "background-color": { "value": "{ams.color.dark-green}" }, + "color": { "value": "{ams.color.primary-white}" } }, - "lime": { - "background-color": { "value": "{ams.brand.color.lime.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "forced-colors": { + "border-width": { "value": "{ams.border.width.md}" } }, - "magenta": { - "background-color": { "value": "{ams.brand.color.magenta.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "green": { + "background-color": { "value": "{ams.color.green}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "neutral-20": { - "background-color": { "value": "{ams.brand.color.neutral.20}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "grey-1": { + "background-color": { "value": "{ams.color.neutral-grey1}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "neutral-40": { - "background-color": { "value": "{ams.brand.color.neutral.40}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "grey-2": { + "background-color": { "value": "{ams.color.neutral-grey2}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "neutral-60": { - "background-color": { "value": "{ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "grey-3": { + "background-color": { "value": "{ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.primary-white}" } }, - "neutral-80": { - "background-color": { "value": "{ams.brand.color.neutral.80}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "light-blue": { + "background-color": { "value": "{ams.color.blue}" }, + "color": { "value": "{ams.color.primary-black}" } + }, + "magenta": { + "background-color": { "value": "{ams.color.magenta}" }, + "color": { "value": "{ams.color.primary-white}" } }, "orange": { - "background-color": { "value": "{ams.brand.color.orange.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "background-color": { "value": "{ams.color.orange}" }, + "color": { "value": "{ams.color.primary-black}" } }, "purple": { - "background-color": { "value": "{ams.brand.color.purple.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.purple}" }, + "color": { "value": "{ams.color.primary-white}" } }, "red": { - "background-color": { "value": "{ams.brand.color.red.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.primary-red}" }, + "color": { "value": "{ams.color.primary-white}" } }, "white": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "background-color": { "value": "{ams.color.primary-white}" }, + "color": { "value": "{ams.color.primary-black}" } }, "yellow": { - "background-color": { "value": "{ams.brand.color.yellow.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } - }, - "forced-colors": { - "border-width": { "value": "{ams.border.width.md}" } + "background-color": { "value": "{ams.color.yellow}" }, + "color": { "value": "{ams.color.primary-black}" } } } } diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json index e5b1914e71..c71242f4f8 100644 --- a/proprietary/tokens/src/components/ams/badge.tokens.json +++ b/proprietary/tokens/src/components/ams/badge.tokens.json @@ -6,65 +6,61 @@ "font-weight": { "value": "{ams.text.font-weight.bold}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "padding-inline": { "value": "{ams.space.xs}" }, - "azure": { - "background-color": { "value": "{ams.brand.color.azure.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } - }, "black": { - "background-color": { "value": "{ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-white}" } }, "blue": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-white}" } + }, + "dark-green": { + "background-color": { "value": "{ams.color.dark-green}" }, + "color": { "value": "{ams.color.primary-white}" } }, "green": { - "background-color": { "value": "{ams.brand.color.green.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.green}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "lime": { - "background-color": { "value": "{ams.brand.color.lime.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "grey-1": { + "background-color": { "value": "{ams.color.neutral-grey1}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "magenta": { - "background-color": { "value": "{ams.brand.color.magenta.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "grey-2": { + "background-color": { "value": "{ams.color.neutral-grey2}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "neutral-20": { - "background-color": { "value": "{ams.brand.color.neutral.20}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "grey-3": { + "background-color": { "value": "{ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.primary-white}" } }, - "neutral-40": { - "background-color": { "value": "{ams.brand.color.neutral.40}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "light-blue": { + "background-color": { "value": "{ams.color.blue}" }, + "color": { "value": "{ams.color.primary-black}" } }, - "neutral-60": { - "background-color": { "value": "{ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } - }, - "neutral-80": { - "background-color": { "value": "{ams.brand.color.neutral.80}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "magenta": { + "background-color": { "value": "{ams.color.magenta}" }, + "color": { "value": "{ams.color.primary-white}" } }, "orange": { - "background-color": { "value": "{ams.brand.color.orange.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "background-color": { "value": "{ams.color.orange}" }, + "color": { "value": "{ams.color.primary-black}" } }, "purple": { - "background-color": { "value": "{ams.brand.color.purple.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.purple}" }, + "color": { "value": "{ams.color.primary-white}" } }, "red": { - "background-color": { "value": "{ams.brand.color.red.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.primary-red}" }, + "color": { "value": "{ams.color.primary-white}" } }, "white": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "background-color": { "value": "{ams.color.primary-white}" }, + "color": { "value": "{ams.color.primary-black}" } }, "yellow": { - "background-color": { "value": "{ams.brand.color.yellow.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "background-color": { "value": "{ams.color.yellow}" }, + "color": { "value": "{ams.color.primary-black}" } } } } diff --git a/proprietary/tokens/src/components/ams/blockquote.tokens.json b/proprietary/tokens/src/components/ams/blockquote.tokens.json index e139132b9e..98ad04803e 100644 --- a/proprietary/tokens/src/components/ams/blockquote.tokens.json +++ b/proprietary/tokens/src/components/ams/blockquote.tokens.json @@ -1,12 +1,12 @@ { "ams": { "blockquote": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.3.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, "line-height": { "value": "{ams.text.level.3.line-height}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" } + "inverse-color": { "value": "{ams.color.primary-white}" } } } } diff --git a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json index 53775d45c8..bb6c679685 100644 --- a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json @@ -20,7 +20,7 @@ "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" }, + "color": { "value": "{ams.color.dark-blue}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" } } } diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json index 6cd4cc6304..2d38418466 100644 --- a/proprietary/tokens/src/components/ams/button.tokens.json +++ b/proprietary/tokens/src/components/ams/button.tokens.json @@ -16,45 +16,45 @@ "border": { "value": "{ams.border.width.md} solid" } }, "primary": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-white}" }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.60}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.neutral-grey3}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" } }, "hover": { - "background-color": { "value": "{ams.brand.color.blue.80}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.blue.80}" } + "background-color": { "value": "{ams.color.dark-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" } } }, "secondary": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "color": { "value": "{ams.brand.color.blue.60}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.blue.60}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "color": { "value": "{ams.color.primary-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.brand.color.blue.80}" }, - "color": { "value": "{ams.brand.color.blue.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" }, + "color": { "value": "{ams.color.dark-blue}" } }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" } }, "focus": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.blue.60}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" } } }, "tertiary": { "background-color": { "value": "transparent" }, - "color": { "value": "{ams.brand.color.blue.60}" }, + "color": { "value": "{ams.color.primary-blue}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.blue.80}" }, - "color": { "value": "{ams.brand.color.blue.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" }, + "color": { "value": "{ams.color.dark-blue}" } }, "disabled": { "background-color": { "value": "transparent" }, - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } }, "icon-only": { diff --git a/proprietary/tokens/src/components/ams/character-count.tokens.json b/proprietary/tokens/src/components/ams/character-count.tokens.json index 235dce5d47..8ec7a7ebe2 100644 --- a/proprietary/tokens/src/components/ams/character-count.tokens.json +++ b/proprietary/tokens/src/components/ams/character-count.tokens.json @@ -1,13 +1,13 @@ { "ams": { "character-count": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.6.line-height}" }, "error": { - "color": { "value": "{ams.brand.color.red.60}" } + "color": { "value": "{ams.color.primary-red}" } } } } diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json index 2dd9857200..688378f65e 100644 --- a/proprietary/tokens/src/components/ams/checkbox.tokens.json +++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json @@ -1,7 +1,7 @@ { "ams": { "checkbox": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -9,70 +9,70 @@ "line-height": { "value": "{ams.text.level.5.line-height}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, "checkmark": { - "border-color": { "value": "{ams.brand.color.blue.60}" }, + "border-color": { "value": "{ams.color.primary-blue}" }, "border-width": { "value": "{ams.border.width.md}" }, "checked": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, + "background-color": { "value": "{ams.color.primary-blue}" }, "background-image": { "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")" }, "hover": { - "background-color": { "value": "{ams.brand.color.blue.80}" } + "background-color": { "value": "{ams.color.dark-blue}" } } }, "disabled": { - "border-color": { "value": "{ams.brand.color.neutral.60}" }, + "border-color": { "value": "{ams.color.neutral-grey3}" }, "border-width": { "value": "{ams.border.width.md}" }, "checked": { - "background-color": { "value": "{ams.brand.color.neutral.60}" }, + "background-color": { "value": "{ams.color.neutral-grey3}" }, "hover": { - "background-color": { "value": "{ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.neutral-grey3}" } } }, "indeterminate": { - "background-color": { "value": "{ams.brand.color.neutral.60}" }, + "background-color": { "value": "{ams.color.neutral-grey3}" }, "hover": { - "background-color": { "value": "{ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.neutral-grey3}" } } } }, "hover": { - "border-color": { "value": "{ams.brand.color.blue.80}" }, + "border-color": { "value": "{ams.color.dark-blue}" }, "border-width": { "value": "{ams.border.width.lg}" } }, "invalid": { - "border-color": { "value": "{ams.brand.color.red.60}" }, + "border-color": { "value": "{ams.color.primary-red}" }, "checked": { - "background-color": { "value": "{ams.brand.color.red.60}" }, + "background-color": { "value": "{ams.color.primary-red}" }, "hover": { - "background-color": { "value": "{ams.brand.color.red.80}" } + "background-color": { "value": "{ams.color.primary-red}" } } }, "hover": { - "border-color": { "value": "{ams.brand.color.red.80}" } + "border-color": { "value": "{ams.color.primary-red}" } }, "indeterminate": { - "background-color": { "value": "{ams.brand.color.red.60}" }, + "background-color": { "value": "{ams.color.primary-red}" }, "hover": { - "background-color": { "value": "{ams.brand.color.red.80}" } + "background-color": { "value": "{ams.color.primary-red}" } } } }, "indeterminate": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, + "background-color": { "value": "{ams.color.primary-blue}" }, "background-image": { "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")" }, "hover": { - "background-color": { "value": "{ams.brand.color.blue.80}" } + "background-color": { "value": "{ams.color.dark-blue}" } } } }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" }, + "color": { "value": "{ams.color.dark-blue}" }, "text-decoration-thickness": { "value": "{ams.border.width.md}" } } } diff --git a/proprietary/tokens/src/components/ams/date-input.tokens.json b/proprietary/tokens/src/components/ams/date-input.tokens.json index 712e508365..9c59ae9390 100644 --- a/proprietary/tokens/src/components/ams/date-input.tokens.json +++ b/proprietary/tokens/src/components/ams/date-input.tokens.json @@ -1,9 +1,9 @@ { "ams": { "date-input": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -17,9 +17,9 @@ } }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" }, "calender-picker-indicator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" @@ -27,7 +27,7 @@ } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }, "calender-picker-indicator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" @@ -35,9 +35,9 @@ } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } } } diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json index 6673ff7210..1339b48d6b 100644 --- a/proprietary/tokens/src/components/ams/description-list.tokens.json +++ b/proprietary/tokens/src/components/ams/description-list.tokens.json @@ -1,11 +1,11 @@ { "ams": { "description-list": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "column-gap": { "value": "{ams.space.lg}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" }, + "inverse-color": { "value": "{ams.color.primary-white}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "row-gap": { "value": "{ams.space.sm}" }, "term": { diff --git a/proprietary/tokens/src/components/ams/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json index d6e3afc169..c30f51e30e 100644 --- a/proprietary/tokens/src/components/ams/dialog.tokens.json +++ b/proprietary/tokens/src/components/ams/dialog.tokens.json @@ -1,7 +1,7 @@ { "ams": { "dialog": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-white}" }, "border": { "value": "0" }, "gap": { "value": "{ams.space.md}" }, "inline-size": { "value": "calc(100% - 2 * {ams.space.grid.md})" }, diff --git a/proprietary/tokens/src/components/ams/error-message.tokens.json b/proprietary/tokens/src/components/ams/error-message.tokens.json index a92ba0493a..84ccb6548a 100644 --- a/proprietary/tokens/src/components/ams/error-message.tokens.json +++ b/proprietary/tokens/src/components/ams/error-message.tokens.json @@ -1,7 +1,7 @@ { "ams": { "error-message": { - "color": { "value": "{ams.brand.color.red.60}" }, + "color": { "value": "{ams.color.primary-red}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, diff --git a/proprietary/tokens/src/components/ams/field-set.tokens.json b/proprietary/tokens/src/components/ams/field-set.tokens.json index 61ff93e1df..68b16401dc 100644 --- a/proprietary/tokens/src/components/ams/field-set.tokens.json +++ b/proprietary/tokens/src/components/ams/field-set.tokens.json @@ -2,11 +2,11 @@ "ams": { "field-set": { "invalid": { - "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.brand.color.red.60}" }, + "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" }, "padding-inline-start": { "value": "{ams.space.md}" } }, "legend": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.4.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, diff --git a/proprietary/tokens/src/components/ams/field.tokens.json b/proprietary/tokens/src/components/ams/field.tokens.json index 5a3f18e419..85fed8fc14 100644 --- a/proprietary/tokens/src/components/ams/field.tokens.json +++ b/proprietary/tokens/src/components/ams/field.tokens.json @@ -3,7 +3,7 @@ "field": { "gap": { "value": "{ams.space.sm}" }, "invalid": { - "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.brand.color.red.60}" }, + "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" }, "padding-inline-start": { "value": "{ams.space.md}" } } } diff --git a/proprietary/tokens/src/components/ams/figure.tokens.json b/proprietary/tokens/src/components/ams/figure.tokens.json index 8c6b1b15a5..45382bd3f8 100644 --- a/proprietary/tokens/src/components/ams/figure.tokens.json +++ b/proprietary/tokens/src/components/ams/figure.tokens.json @@ -3,12 +3,12 @@ "figure": { "gap": { "value": "{ams.space.sm}" }, "caption": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.6.line-height}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" } + "inverse-color": { "value": "{ams.color.primary-white}" } } } } diff --git a/proprietary/tokens/src/components/ams/file-input.tokens.json b/proprietary/tokens/src/components/ams/file-input.tokens.json index 013613a7af..97731f6e80 100644 --- a/proprietary/tokens/src/components/ams/file-input.tokens.json +++ b/proprietary/tokens/src/components/ams/file-input.tokens.json @@ -1,9 +1,9 @@ { "ams": { "file-input": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "border": { "value": "{ams.border.width.sm} dashed {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "border": { "value": "{ams.border.width.sm} dashed {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.primary-black}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, @@ -13,24 +13,24 @@ "padding-block": { "value": "{ams.space.md}" }, "padding-inline": { "value": "{ams.space.md}" }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" }, + "color": { "value": "{ams.color.neutral-grey3}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } }, "file-selector-button": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.blue.60}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "margin-inline-end": { "value": "{ams.space.md}" }, "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.brand.color.blue.80}" }, - "color": { "value": "{ams.brand.color.blue.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" }, + "color": { "value": "{ams.color.dark-blue}" } }, "disabled": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } }, "forced-color-mode": { diff --git a/proprietary/tokens/src/components/ams/file-list.tokens.json b/proprietary/tokens/src/components/ams/file-list.tokens.json index e30532d050..ecfd0250c5 100644 --- a/proprietary/tokens/src/components/ams/file-list.tokens.json +++ b/proprietary/tokens/src/components/ams/file-list.tokens.json @@ -10,7 +10,7 @@ "gap": { "value": "{ams.space.sm}" }, "line-height": { "value": "{ams.text.level.6.line-height}" }, "details": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } }, "preview": { "width": { "value": "clamp(2.5rem, 10vw, 5rem)" } diff --git a/proprietary/tokens/src/components/ams/footer.tokens.json b/proprietary/tokens/src/components/ams/footer.tokens.json index f65d5aa863..41209620b6 100644 --- a/proprietary/tokens/src/components/ams/footer.tokens.json +++ b/proprietary/tokens/src/components/ams/footer.tokens.json @@ -2,7 +2,7 @@ "ams": { "footer": { "top": { - "background-color": { "value": "{ams.brand.color.blue.60}" } + "background-color": { "value": "{ams.color.primary-blue}" } } } } diff --git a/proprietary/tokens/src/components/ams/heading.tokens.json b/proprietary/tokens/src/components/ams/heading.tokens.json index 9425a8ab2c..274f8c401d 100644 --- a/proprietary/tokens/src/components/ams/heading.tokens.json +++ b/proprietary/tokens/src/components/ams/heading.tokens.json @@ -1,10 +1,10 @@ { "ams": { "heading": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" }, + "inverse-color": { "value": "{ams.color.primary-white}" }, "level": { "1": { "font-size": { "value": "{ams.text.level.1.font-size}" }, diff --git a/proprietary/tokens/src/components/ams/hint.tokens.json b/proprietary/tokens/src/components/ams/hint.tokens.json index 45536b17a4..29ebf22c53 100644 --- a/proprietary/tokens/src/components/ams/hint.tokens.json +++ b/proprietary/tokens/src/components/ams/hint.tokens.json @@ -1,7 +1,7 @@ { "ams": { "hint": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/icon-button.tokens.json b/proprietary/tokens/src/components/ams/icon-button.tokens.json index 22a4d77208..99baed796e 100644 --- a/proprietary/tokens/src/components/ams/icon-button.tokens.json +++ b/proprietary/tokens/src/components/ams/icon-button.tokens.json @@ -1,35 +1,35 @@ { "ams": { "icon-button": { - "color": { "value": "{ams.brand.color.blue.60}" }, + "color": { "value": "{ams.color.primary-blue}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, "hover": { "background-color": { "value": "rgba(0, 70, 153, 0.125)" }, - "color": { "value": "{ams.brand.color.blue.80}" } + "color": { "value": "{ams.color.dark-blue}" } }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } }, "contrast-color": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "hover": { "background-color": { "value": "rgba(0, 0, 0, 0.125)" }, - "color": { "value": "{ams.brand.color.neutral.100}" } + "color": { "value": "{ams.color.primary-black}" } }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } }, "inverse-color": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-white}" }, "hover": { - "background-color": { "value": "{ams.brand.color.blue.80}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "{ams.color.dark-blue}" }, + "color": { "value": "{ams.color.primary-white}" } }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.0}" }, - "background-color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.primary-white}" }, + "background-color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/icon.tokens.json b/proprietary/tokens/src/components/ams/icon.tokens.json index c1e639a30d..6714de0809 100644 --- a/proprietary/tokens/src/components/ams/icon.tokens.json +++ b/proprietary/tokens/src/components/ams/icon.tokens.json @@ -2,7 +2,7 @@ "ams": { "icon": { "inverse": { - "color": { "value": "{ams.brand.color.neutral.0}" } + "color": { "value": "{ams.color.primary-white}" } }, "size-3": { "font-size": { "value": "{ams.text.level.3.font-size}" }, diff --git a/proprietary/tokens/src/components/ams/label.tokens.json b/proprietary/tokens/src/components/ams/label.tokens.json index 7145031b94..cea8edd306 100644 --- a/proprietary/tokens/src/components/ams/label.tokens.json +++ b/proprietary/tokens/src/components/ams/label.tokens.json @@ -1,7 +1,7 @@ { "ams": { "label": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.4.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, diff --git a/proprietary/tokens/src/components/ams/link.tokens.json b/proprietary/tokens/src/components/ams/link.tokens.json index eff5dfb6ed..459b4d8b09 100644 --- a/proprietary/tokens/src/components/ams/link.tokens.json +++ b/proprietary/tokens/src/components/ams/link.tokens.json @@ -22,7 +22,7 @@ "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" } }, "visited": { - "color": { "value": "{ams.brand.color.purple.60}" } + "color": { "value": "{ams.color.purple}" } } }, "standalone": { diff --git a/proprietary/tokens/src/components/ams/logo.tokens.json b/proprietary/tokens/src/components/ams/logo.tokens.json index 5dc3df14cf..a9cff948db 100644 --- a/proprietary/tokens/src/components/ams/logo.tokens.json +++ b/proprietary/tokens/src/components/ams/logo.tokens.json @@ -5,10 +5,10 @@ "value": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)", "comment": "This is the same size as Grid space medium" }, - "emblem": { "color": { "value": "{ams.brand.color.red.60}" } }, + "emblem": { "color": { "value": "{ams.color.primary-red}" } }, "min-block-size": { "value": "2.5rem" }, - "title": { "color": { "value": "{ams.brand.color.red.60}" } }, - "subsite": { "color": { "value": "{ams.brand.color.neutral.100}" } } + "subsite": { "color": { "value": "{ams.color.primary-black}" } }, + "title": { "color": { "value": "{ams.color.primary-red}" } } } } } diff --git a/proprietary/tokens/src/components/ams/mark.tokens.json b/proprietary/tokens/src/components/ams/mark.tokens.json index 58ec203e5b..b8b989c57c 100644 --- a/proprietary/tokens/src/components/ams/mark.tokens.json +++ b/proprietary/tokens/src/components/ams/mark.tokens.json @@ -1,7 +1,7 @@ { "ams": { "mark": { - "background-color": { "value": "{ams.brand.color.yellow.60}" } + "background-color": { "value": "{ams.color.yellow}" } } } } diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json index 2cc338bac6..9b9b029090 100644 --- a/proprietary/tokens/src/components/ams/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json @@ -1,12 +1,12 @@ { "ams": { "ordered-list": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "gap": { "value": "{ams.space.md}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" }, + "inverse-color": { "value": "{ams.color.primary-white}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "list-style-type": { "value": "decimal" }, "small": { diff --git a/proprietary/tokens/src/components/ams/page-heading.tokens.json b/proprietary/tokens/src/components/ams/page-heading.tokens.json index bf84b67300..6cf4c6777a 100644 --- a/proprietary/tokens/src/components/ams/page-heading.tokens.json +++ b/proprietary/tokens/src/components/ams/page-heading.tokens.json @@ -1,11 +1,11 @@ { "ams": { "page-heading": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.0.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" }, + "inverse-color": { "value": "{ams.color.primary-white}" }, "line-height": { "value": "{ams.text.level.0.font-size}" } } } diff --git a/proprietary/tokens/src/components/ams/paragraph.tokens.json b/proprietary/tokens/src/components/ams/paragraph.tokens.json index cb65d44a30..9e3ba0c585 100644 --- a/proprietary/tokens/src/components/ams/paragraph.tokens.json +++ b/proprietary/tokens/src/components/ams/paragraph.tokens.json @@ -1,12 +1,12 @@ { "ams": { "paragraph": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" }, + "inverse-color": { "value": "{ams.color.primary-white}" }, "small": { "font-size": { "value": "{ams.text.level.6.font-size}" }, "line-height": { "value": "{ams.text.level.6.line-height}" } diff --git a/proprietary/tokens/src/components/ams/password-input.tokens.json b/proprietary/tokens/src/components/ams/password-input.tokens.json index bbc1195258..54c795b9d6 100644 --- a/proprietary/tokens/src/components/ams/password-input.tokens.json +++ b/proprietary/tokens/src/components/ams/password-input.tokens.json @@ -1,9 +1,9 @@ { "ams": { "password-input": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -12,21 +12,21 @@ "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "placeholder": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index 22b78714ec..796dc4eb83 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -1,7 +1,7 @@ { "ams": { "radio": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -11,65 +11,65 @@ "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" }, "checked-indicator": { - "fill": { "value": "{ams.brand.color.blue.60}" }, + "fill": { "value": "{ams.color.primary-blue}" }, "disabled": { - "fill": { "value": "{ams.brand.color.neutral.60}" } + "fill": { "value": "{ams.color.neutral-grey3}" } }, "disabled-invalid": { - "fill": { "value": "{ams.brand.color.neutral.60}" }, + "fill": { "value": "{ams.color.neutral-grey3}" }, "hover": { - "fill": { "value": "{ams.brand.color.neutral.60}" } + "fill": { "value": "{ams.color.neutral-grey3}" } } }, "hover": { - "fill": { "value": "{ams.brand.color.blue.80}" } + "fill": { "value": "{ams.color.dark-blue}" } }, "invalid": { - "fill": { "value": "{ams.brand.color.red.60}" }, + "fill": { "value": "{ams.color.primary-red}" }, "hover": { - "fill": { "value": "{ams.brand.color.red.80}" } + "fill": { "value": "{ams.color.primary-red}" } } } }, "hover-indicator": { "stroke-width": { "value": "3px" }, "hover": { - "stroke": { "value": "{ams.brand.color.blue.60}" } + "stroke": { "value": "{ams.color.primary-blue}" } }, "invalid": { "hover": { - "stroke": { "value": "{ams.brand.color.red}" } + "stroke": { "value": "{ams.color.primary-red}" } } } }, "circle": { - "fill": { "value": "{ams.brand.color.neutral.0}" }, - "stroke": { "value": "{ams.brand.color.blue.60}" }, + "fill": { "value": "{ams.color.primary-white}" }, + "stroke": { "value": "{ams.color.primary-blue}" }, "stroke-width": { "value": "2px" }, "disabled": { - "stroke": { "value": "{ams.brand.color.neutral.60}" } + "stroke": { "value": "{ams.color.neutral-grey3}" } }, "disabled-invalid": { - "stroke": { "value": "{ams.brand.color.neutral.60}" }, + "stroke": { "value": "{ams.color.neutral-grey3}" }, "hover": { - "stroke": { "value": "{ams.brand.color.neutral.60}" } + "stroke": { "value": "{ams.color.neutral-grey3}" } } }, "hover": { - "stroke": { "value": "{ams.brand.color.blue.80}" } + "stroke": { "value": "{ams.color.dark-blue}" } }, "invalid": { - "stroke": { "value": "{ams.brand.color.red.60}" }, + "stroke": { "value": "{ams.color.primary-red}" }, "hover": { - "stroke": { "value": "{ams.brand.color.red.80}" } + "stroke": { "value": "{ams.color.primary-red}" } } } }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" }, + "color": { "value": "{ams.color.dark-blue}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" } }, "icon-container": { diff --git a/proprietary/tokens/src/components/ams/screen.tokens.json b/proprietary/tokens/src/components/ams/screen.tokens.json index 4efbb1e77e..122f5a114c 100644 --- a/proprietary/tokens/src/components/ams/screen.tokens.json +++ b/proprietary/tokens/src/components/ams/screen.tokens.json @@ -1,7 +1,7 @@ { "ams": { "screen": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-white}" }, "wide": { "max-inline-size": { "value": "100rem" } }, diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json index 2162dd562e..e5f24de100 100644 --- a/proprietary/tokens/src/components/ams/search-field.tokens.json +++ b/proprietary/tokens/src/components/ams/search-field.tokens.json @@ -2,9 +2,9 @@ "ams": { "search-field": { "input": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -17,22 +17,22 @@ "value": "url(\"data:image/svg+xml;utf8,\")" }, "block-size": { "value": "{ams.text.level.5.font-size}" }, - "color": { "value": "{ams.brand.color.blue.60}" }, + "color": { "value": "{ams.color.primary-blue}" }, "inline-size": { "value": "{ams.text.level.5.font-size}" } }, "hover": { "box-shadow": { - "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" + "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "placeholder": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/select.tokens.json b/proprietary/tokens/src/components/ams/select.tokens.json index 9d1ff8a638..76c6d33863 100644 --- a/proprietary/tokens/src/components/ams/select.tokens.json +++ b/proprietary/tokens/src/components/ams/select.tokens.json @@ -1,13 +1,13 @@ { "ams": { "select": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-white}" }, "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" }, "background-position": { "value": "right {ams.space.md} center" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -19,21 +19,21 @@ "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "option": { "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json index 1e5f981008..66cfb48aee 100644 --- a/proprietary/tokens/src/components/ams/skip-link.tokens.json +++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json @@ -1,8 +1,8 @@ { "ams": { "skip-link": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-white}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -11,7 +11,7 @@ "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" }, "hover": { - "background-color": { "value": "{ams.brand.color.blue.80}" } + "background-color": { "value": "{ams.color.dark-blue}" } } } } diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json index 5a75db0965..7df7994248 100644 --- a/proprietary/tokens/src/components/ams/spotlight.tokens.json +++ b/proprietary/tokens/src/components/ams/spotlight.tokens.json @@ -1,24 +1,24 @@ { "ams": { "spotlight": { - "background-color": { "value": "{ams.brand.color.purple.60}" }, - "azure": { - "background-color": { "value": "{ams.brand.color.azure.60}" } + "background-color": { "value": "{ams.color.purple}" }, + "blue": { + "background-color": { "value": "{ams.color.blue}" } }, - "green": { - "background-color": { "value": "{ams.brand.color.green.60}" } + "dark-green": { + "background-color": { "value": "{ams.color.dark-green}" } }, - "lime": { - "background-color": { "value": "{ams.brand.color.lime.60}" } + "green": { + "background-color": { "value": "{ams.color.green}" } }, "magenta": { - "background-color": { "value": "{ams.brand.color.magenta.60}" } + "background-color": { "value": "{ams.color.magenta}" } }, "orange": { - "background-color": { "value": "{ams.brand.color.orange.60}" } + "background-color": { "value": "{ams.color.orange}" } }, "yellow": { - "background-color": { "value": "{ams.brand.color.yellow.60}" } + "background-color": { "value": "{ams.color.yellow}" } } } } diff --git a/proprietary/tokens/src/components/ams/switch.tokens.json b/proprietary/tokens/src/components/ams/switch.tokens.json index 4a4ab6db4a..6ec6eccd16 100644 --- a/proprietary/tokens/src/components/ams/switch.tokens.json +++ b/proprietary/tokens/src/components/ams/switch.tokens.json @@ -1,24 +1,24 @@ { "ams": { "switch": { - "background-color": { "value": "{ams.brand.color.neutral.60}" }, + "background-color": { "value": "{ams.color.neutral-grey3}" }, "font-family": { "value": "{ams.text.font-family}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, "inline-size": { "value": "3.5rem" }, "thumb": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, + "background-color": { "value": "{ams.color.primary-white}" }, "inline-size": { "value": "1.75rem" }, "block-size": { "value": "1.75rem" }, "hover": { "box-shadow": { "value": "0 0 0 0.125rem {ams.switch.thumb.hover.color}" }, - "color": { "value": "{ams.brand.color.blue.80}" } + "color": { "value": "{ams.color.dark-blue}" } } }, "checked": { - "background-color": { "value": "{ams.brand.color.blue.60}" } + "background-color": { "value": "{ams.color.primary-blue}" } }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json index e15afdf9b4..a95c874fd3 100644 --- a/proprietary/tokens/src/components/ams/table.tokens.json +++ b/proprietary/tokens/src/components/ams/table.tokens.json @@ -1,7 +1,7 @@ { "ams": { "table": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -10,7 +10,10 @@ "font-weight": { "value": "{ams.text.font-weight.bold}" } }, "cell": { - "border-block-end": { "value": "{ams.border.width.sm} solid {ams.brand.color.neutral.20}" }, + "border-block-end": { + "value": "{ams.border.width.sm} solid #d1d1d1", + "comment": "TODO: replace with color token" + }, "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" } }, diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index 06681aaace..52ea79702c 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -3,10 +3,13 @@ "tabs": { "gap": { "value": "{ams.space.md}" }, "list": { - "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.neutral.20}" } + "box-shadow": { + "value": "inset 0 calc({ams.border.width.md} * -1) #d1d1d1", + "comment": "TODO: replace with color token" + } }, "button": { - "color": { "value": "{ams.brand.color.blue.60}" }, + "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, @@ -16,16 +19,16 @@ "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" }, - "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.blue.80}" } + "color": { "value": "{ams.color.dark-blue}" }, + "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.color.dark-blue}" } }, "selected": { - "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.blue.60}" }, + "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.color.primary-blue}" }, + "color": { "value": "{ams.color.primary-blue}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" } }, "disabled": { - "color": { "value": "{ams.brand.color.neutral.60}" }, + "color": { "value": "{ams.color.neutral-grey3}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } } } diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json index b5218ea426..c951eb18d0 100644 --- a/proprietary/tokens/src/components/ams/text-area.tokens.json +++ b/proprietary/tokens/src/components/ams/text-area.tokens.json @@ -1,9 +1,9 @@ { "ams": { "text-area": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -15,22 +15,22 @@ "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "placeholder": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json index 1324bb0224..6f1020ab25 100644 --- a/proprietary/tokens/src/components/ams/text-input.tokens.json +++ b/proprietary/tokens/src/components/ams/text-input.tokens.json @@ -1,9 +1,9 @@ { "ams": { "text-input": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -12,21 +12,21 @@ "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "{ams.space.md}" }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" } + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "placeholder": { - "color": { "value": "{ams.brand.color.neutral.60}" } + "color": { "value": "{ams.color.neutral-grey3}" } } } } diff --git a/proprietary/tokens/src/components/ams/time-input.tokens.json b/proprietary/tokens/src/components/ams/time-input.tokens.json index ff0765b436..fd90bb930f 100644 --- a/proprietary/tokens/src/components/ams/time-input.tokens.json +++ b/proprietary/tokens/src/components/ams/time-input.tokens.json @@ -1,9 +1,9 @@ { "ams": { "time-input": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.100}" }, - "color": { "value": "{ams.brand.color.neutral.100}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -17,9 +17,9 @@ } }, "disabled": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.neutral.60}" }, - "color": { "value": "{ams.brand.color.neutral.60}" }, + "background-color": { "value": "{ams.color.primary-white}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.neutral-grey3}" }, "calender-picker-indicator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" @@ -27,7 +27,7 @@ } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.neutral.100}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }, "calender-picker-indicator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" @@ -35,9 +35,9 @@ } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.brand.color.red.60}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.brand.color.red.80}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } } } diff --git a/proprietary/tokens/src/components/ams/top-task-link.tokens.json b/proprietary/tokens/src/components/ams/top-task-link.tokens.json index eb0b1f85b3..9dd4bd5fcb 100644 --- a/proprietary/tokens/src/components/ams/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/ams/top-task-link.tokens.json @@ -3,7 +3,7 @@ "top-task-link": { "gap": { "value": "{ams.space.sm}" }, "description": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, @@ -19,7 +19,7 @@ "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" }, "hover": { - "color": { "value": "{ams.brand.color.blue.80}" }, + "color": { "value": "{ams.color.dark-blue}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" } } }, diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 6459655630..0bf446f8df 100644 --- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json @@ -1,12 +1,12 @@ { "ams": { "unordered-list": { - "color": { "value": "{ams.brand.color.neutral.100}" }, + "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "gap": { "value": "{ams.space.md}" }, - "inverse-color": { "value": "{ams.brand.color.neutral.0}" }, + "inverse-color": { "value": "{ams.color.primary-white}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "list-style-type": { "value": "'\\2022'" }, "item": { diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index 1b747df40a..25c42a84b8 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -27,7 +27,7 @@ export const Default: Story = { args: { children: [ - + , + -### Green +### Dark Green - + -### Lime +### Green - + ### Magenta diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx index 178cf96da1..d717649682 100644 --- a/storybook/src/components/Spotlight/Spotlight.stories.tsx +++ b/storybook/src/components/Spotlight/Spotlight.stories.tsx @@ -17,7 +17,7 @@ const meta = { -
{quote}
+
{quote}
@@ -30,21 +30,21 @@ type Story = StoryObj export const Default: Story = {} -export const Azure: Story = { +export const Blue: Story = { args: { - color: 'azure', + color: 'blue', }, } -export const Green: Story = { +export const DarkGreen: Story = { args: { - color: 'green', + color: 'dark-green', }, } -export const Lime: Story = { +export const Green: Story = { args: { - color: 'lime', + color: 'green', }, } diff --git a/storybook/src/docs/components/ColorPalette.tsx b/storybook/src/docs/components/ColorPalette.tsx index 454a28b6eb..3c5c5875c7 100644 --- a/storybook/src/docs/components/ColorPalette.tsx +++ b/storybook/src/docs/components/ColorPalette.tsx @@ -1,66 +1,38 @@ import './color-palette.css' -import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' export type DivProps = PropsWithChildren> const ColorPaletteRoot = forwardRef(({ children, ...restProps }: DivProps, ref: ForwardedRef) => ( -
+
{children}
)) ColorPaletteRoot.displayName = 'ColorPalette' -type ColorPaletteSwatchProps = { - color: Record<'0' | '20' | '40' | '60' | '80' | '100', string> - name: string -} - -const ColorPaletteSwatch = ({ color, name }: ColorPaletteSwatchProps) => ( -
- ams.brand.color.{name} - {name === 'neutral' ? ( - <> - - - - - - - - ) : ( - <> - - - - - )} -
+const ColorPaletteSection = ({ children }: DivProps) => ( +
{children}
) -ColorPaletteSwatch.displayName = 'ColorPalette.Swatch' +ColorPaletteSection.displayName = 'ColorPalette.Section' type ColorPaletteTileProps = { - color: string | undefined - level: string + color: string + name: string } -const ColorPaletteTile = ({ color, level }: ColorPaletteTileProps) => ( -
- {color && ( - <> - {level} -
- - )} +const ColorPaletteTile = ({ name, color }: ColorPaletteTileProps) => ( +
+
+
+
{name}
+
{color}
+
) ColorPaletteTile.displayName = 'ColorPalette.Tile' -export const ColorPalette = Object.assign(ColorPaletteRoot, { - Swatch: ColorPaletteSwatch, - Tile: ColorPaletteTile, -}) +export const ColorPalette = Object.assign(ColorPaletteRoot, { Section: ColorPaletteSection, Tile: ColorPaletteTile }) diff --git a/storybook/src/docs/components/color-palette.css b/storybook/src/docs/components/color-palette.css index e3ddd1b57b..f35df283c8 100644 --- a/storybook/src/docs/components/color-palette.css +++ b/storybook/src/docs/components/color-palette.css @@ -1,35 +1,50 @@ -.ams-docs-color-palette { - align-items: center; - display: grid; - gap: 4rem; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); +.ams-storybook-color-palette { + display: flex; + flex-direction: column; + gap: 2rem; } -.ams-docs-color-swatch { +.ams-storybook-color-palette__section { + align-items: start; display: grid; - gap: 0 2px; - grid-template-columns: repeat(6, 1fr); + gap: 2rem; + grid-template-columns: repeat(5, 1fr); +} - > :nth-child(1) { - grid-column: 1 / -1; - } +.ams-storybook-color-palette__tile { + display: flex; + flex-direction: column; + gap: 0.25rem; } -.ams-docs-color-code { - display: block; - font-size: 13px; - padding-block-end: 0.5rem; - text-align: center; +.ams-storybook-color-palette__example { + aspect-ratio: var(--ams-aspect-ratio-x-wide); + border: 0.0625rem solid rgb(0 0 0 / 12.5%); + grid-area: example; } -:not(.ams-docs-color-swatch--neutral) > .ams-docs-color-tile--60 { - grid-column: span 4; +.ams-storybook-color-palette__description, +.ams-storybook-color-palette__name, +.ams-storybook-color-palette__color { + margin-block: 0; + margin-inline: 0; + padding-block: 0; + padding-inline: 0; } -.ams-docs-color-sample { - block-size: 6rem; +.ams-storybook-color-palette__description { + color: #000; + column-gap: 1ch; + display: flex; + flex-wrap: wrap; + font-family: "Amsterdam Sans", "Arial", sans-serif; + justify-content: space-between; +} + +.ams-storybook-color-palette__name { + font-weight: 800; +} - .ams-docs-color-swatch--neutral > .ams-docs-color-tile--0 & { - box-shadow: inset 0 0 0 0.0625rem rgb(0 0 0 / 12.5%); - } +.ams-storybook-color-palette__color { + text-align: end; } diff --git a/storybook/src/foundation/design-tokens/colour.docs.mdx b/storybook/src/foundation/design-tokens/colour.docs.mdx index 2b2aa27025..10579bce9e 100644 --- a/storybook/src/foundation/design-tokens/colour.docs.mdx +++ b/storybook/src/foundation/design-tokens/colour.docs.mdx @@ -3,9 +3,12 @@ import tokens from "@amsterdam/design-system-tokens/dist/index.json"; import { Meta } from "@storybook/blocks"; import { ColorPalette } from "../../docs/components/ColorPalette"; +import { StatusBadge } from "../../docs/components/StatusBadge"; + + # Colour Our colour palette is vibrant and crisp. @@ -13,16 +16,29 @@ The main colours are red, blue, black, and white. They are complemented by a range of accent colors and shades of gray. - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + ## Application @@ -55,7 +71,7 @@ Text and links on a dark background are white instead of black and blue. We use shades of gray for borders, backgrounds and labels of disabled controls. Secondary text is dark gray. -### Azure, Lime, Green, Yellow, Orange, Magenta, Purple +### Blue, Green, Dark Green, Yellow, Orange, Magenta, Purple These colours are supplemental. Spotlight and Breakout use them to create prominent sections. diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css index 3bac7537e3..a480162d30 100644 --- a/storybook/src/styles/docs.css +++ b/storybook/src/styles/docs.css @@ -166,8 +166,8 @@ } [class*="ams-docs-token-example--space"] { - background-color: var(--ams-brand-color-neutral-0); - outline: 1px dashed var(--ams-brand-color-neutral-40); + background-color: var(--ams-color-primary-white); + outline: 1px dashed var(--ams-color-neutral-grey2); } .ams-resize-horizontal {