Releases: jpmorganchase/salt-ds
@salt-ds/theme@1.18.0
Minor Changes
-
d0b6912: Added display 4 text tokens, which have the same value as display 3.
In theme next, display sizes are remapped to reflect larger size than h1.
-
87791a1: Updated H1 font weight
H1 Before New Default Bold Semi bold Small Medium Regular Strong Extra bold Bold Added font weight in palette layer for display, heading, body and notation.
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold); + --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular); + --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold); + --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold); + --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular); + --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold); + --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular); + --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light); + --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold); + --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold); + --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular); + --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
Wired text characteristics font weight to newly added palette tokens.
In theme next, when Amplitude is used for heading, font weight will be adjusted accordingly.
-
400c730: - Added
--salt-opacity-45: 0.45
.- Updated
--salt-palette-opacity-primary-border
fromvar(--salt-opacity-40)
tovar(--salt-opacity-45)
.
- Updated
-
416b7dd: Updated foundation color palette used in theme next due to color contrast concerns, below colors are impacted.
--salt-color-blue-200 --salt-color-blue-300 --salt-color-blue-400 --salt-color-blue-600 --salt-color-blue-700 --salt-color-blue-800 --salt-color-blue-900 --salt-color-green-200 --salt-color-green-300 --salt-color-green-400 --salt-color-green-600 --salt-color-green-700 --salt-color-green-800 --salt-color-green-900 --salt-color-teal-200 --salt-color-teal-300 --salt-color-teal-400 --salt-color-teal-600 --salt-color-teal-700 --salt-color-teal-800 --salt-color-teal-900 --salt-color-orange-200 --salt-color-orange-300 --salt-color-orange-400 --salt-color-orange-500 --salt-color-orange-600 --salt-color-orange-700 --salt-color-orange-800 --salt-color-red-300 --salt-color-red-400 --salt-color-red-600 --salt-color-red-700 --salt-color-red-800 --salt-color-red-900 --salt-color-purple-200 --salt-color-purple-300 --salt-color-purple-400 --salt-color-purple-600 --salt-color-purple-700 --salt-color-purple-800 --salt-color-purple-900
-
081c82b: Added 20 groups of categorical palette and category characteristics tokens, e.g., cat 1 tokens
Characteristics
--salt-category-1-subtle-foreground
--salt-category-1-subtle-background
--salt-category-1-subtle-borderColor
--salt-category-1-bold-background
--salt-category-1-bold-foreground
Palette
--salt-palette-categorical-1
--salt-palette-categorical-1-strong
--salt-palette-categorical-1-weakest
@salt-ds/core@1.29.0
Minor Changes
-
d0b6912: Added
Display4
text.<Display4>text</Display> <Text styleAs="display4">text</Text>
It will be using different size when used in
SaltProvider
andUNSTABLE_SaltProviderNext
. -
c36e8a4: Added
icon
prop to Toast to allow for a custom icon<Toast icon={<InfoIcon />} status={"info"}> <ToastContent> <Text> <strong>Info with Custom Icon</strong> </Text> <div>Filters have been cleared</div> </ToastContent> </Toast>
-
a0fff18: - Updated Input readonly state so that status adornment will be shown when
validationStatus
is set.- Added
bordered
prop for Input. When set, a full border will be applied.
<Input bordered />
- Updated MultilineInput readonly state so that status adornment will be shown and background color to match status color when
validationStatus
is set. - Added rounded corner support for MultilineInput, when used in theme next.
- Added
Patch Changes
@salt-ds/lab@1.0.0-alpha.47
@salt-ds/theme@1.17.0
Minor Changes
- 2199704: Added categorical colors. Refer to color page for more detail. Closes #2523.
Patch Changes
- 353e917: Updated status tokens for theme next to match latest design
@salt-ds/icons@1.12.0
Minor Changes
-
f44fe1e: Updated icons with arrows to be more consistent:
- Inbox
- InboxSolid
- MoveAll
- MoveHorizontal
- MoveVertical
Added:
- MaximizeSolid
- Sparkle
- SparkleSolid
@salt-ds/core@1.28.1
@salt-ds/lab@1.0.0-alpha.46
Patch Changes
- 04a6fb8: - Remove validation logic from
DatePicker
to support integration throughFormField
.- Added
onSelect
onSelectionChange
andvalidationStatus
props toDatePicker
.
- Added
@salt-ds/theme@1.16.0
Minor Changes
-
25e38e4: ## Characteristics
Added decorative and informative status foreground tokens. This ensures contrast requirements are met for both text and non-text elements.
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative); + --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative); + --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative); + --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative); + + --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative); + --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); + --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); + --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
Deprecated status foreground tokens.
Name Replacement --salt-status-info-foreground --salt-status-info-foreground-decorative --salt-status-error-foreground --salt-status-error-foreground-decorative --salt-status-warning-foreground --salt-status-warning-foreground-decorative --salt-status-success-foreground --salt-status-success-foreground-decorative Palette
Added decorative and informative info, error, warning and success foreground tokens.
Light
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-600); + --salt-palette-error-foreground-decorative: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-600); + --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); + --salt-palette-success-foreground-decorative: var(--salt-color-green-500); + --salt-palette-success-foreground-informative: var(--salt-color-green-600);
Dark
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-100); + --salt-palette-info-foreground-informative: var(--salt-color-blue-200); + --salt-palette-error-foreground-decorative: var(--salt-color-red-400); + --salt-palette-error-foreground-informative: var(--salt-color-red-200); + --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-400); + --salt-palette-success-foreground-decorative: var(--salt-color-green-400); + --salt-palette-success-foreground-informative: var(--salt-color-green-200);
Updated info and error border tokens.
- --salt-palette-info-border: var(--salt-color-blue-500); + --salt-palette-info-border: var(--salt-color-blue-400); - --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-border: var(--salt-color-red-400);
Deprecated status foreground tokens.
Name Replacement --salt-palette-info-foreground --salt-palette-info-foreground-decorative --salt-palette-error-foreground --salt-palette-error-foreground-decorative --salt-palette-warning-foreground --salt-palette-warning-foreground-decorative --salt-palette-success-foreground --salt-palette-success-foreground-decorative Foundations
Added
--salt-color-orange-850
:+ --salt-color-orange-850: rgb(194, 52, 7);
-
eaab9d8: Switched to use new color palette in theme next when using
UNSTABLE_SaltProviderNext
.Refer to documentation for more information.
Closes #3394
-
5ed8ed8: Added new
--salt-overlayable-rangeSelection
token, which points to new--salt-palette-neutral-selection
and resolves to black@15% in light mode and white@15% in dark mode. -
e1d4aab: Supports heading font switch when using
UNSTABLE_SaltProviderNext
.Refer to documentation for more information.
@salt-ds/core@1.28.0
Minor Changes
-
25e38e4: Added status color support to Text.
<Text color="info">This is error color of Text</Text> <Text color="error">This is error color of Text</Text> <Text color="warning">This is warning color of Text</Text> <Text color="success">This is success color of Text</Text>
- Checkbox will now have the correct border color on focus when it is in an error or warning state.
- Checkbox now uses
--salt-status-error-foreground-decorative
and--salt-status-warning-foreground-decorative
instead of--salt-status-error-foreground
and--salt-status-warning-foreground
. - RadioButton will now have the correct border color on focus when it is in an error or warning state.
- RadioButton now uses
--salt-status-error-foreground-decorative
and--salt-status-warning-foreground-decorative
instead of--salt-status-error-foreground
and--salt-status-warning-foreground
. - StatusAdornment now uses
--salt-status-error-foreground-decorative
,--salt-status-warning-foreground-decorative
and--salt-status-success-foreground-decorative
instead of--salt-status-error-foreground
,--salt-status-warning-foreground
and--salt-status-success-foreground
. - StatusIndicator now uses
--salt-status-info-foreground-decorative
,--salt-status-error-foreground-decorative
,--salt-status-warning-foreground-decorative
and--salt-status-success-foreground-decorative
instead of--salt-status-info-foreground
,--salt-status-error-foreground
,--salt-status-warning-foreground
,--salt-status-success-foreground
.
-
5ef2817: Added a new
accent
prop toUNSTABLE_SaltProviderNext
with"blue"
or"teal"
option. To try it out, use<UNSTABLE_SaltProviderNext accent="teal">
Refer to documentation for more information.
-
e1d4aab: Added a new
headingFont
prop toUNSTABLE_SaltProviderNext
with"Open Sans"
or"Amplitude"
option. To try it out, use<UNSTABLE_SaltProviderNext headingFont="Amplitude">
Refer to documentation for more information.
Patch Changes
-
33ffe0e: Remove padding bottom and padding right from
DialogContent
-
88711e3: Fixed
onBlur
andonFocus
not working with FormField. -
1cfefb6: Added flex 1 to
DialogContent
so the dialog actions stick to the bottom -
d5b968f: Fixed dialog border styling was not set correctly
-
b266a07: Made
status
prop optional in Toast, allowing for Toast to have no status.
The default for thestatus
prop changed from"info"
toundefined
. Toasts intended to have "info" status must refactor as beflow.Note: This change is a bug fix but a breaking change for Toasts that were intended to have "info" status, but did not explicitly set the
status
prop.Before:
<Toast> <ToastContent> A new version of this file is available with 37 updates. </ToastContent> </Toast>
After:
<Toast status="info"> <ToastContent> A new version of this file is available with 37 updates. </ToastContent> </Toast>
@salt-ds/ag-grid-theme@2.0.0
Major Changes
-
5ed8ed8: Ag grid theme is updated to support ag grid version v31, and it's now driven by AG grid variables with a big reduction in bundle size. Follow below for upgrade instructions:
- Update stylesheet import
- import "ag-grid-community/dist/styles/ag-grid.css"; + import "ag-grid-community/styles/ag-grid.css";
UITK theme is removed, migrate to Salt theme
- import "@salt-ds/ag-grid-theme/uitk-ag-theme.css"; + import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
- Update classnames used on the container around
AgGridReact
, which no longer has density portion. If you previously copieduseAgGridHelpers
, you'll need to copy a new version from here.
In light mode:
- .ag-theme-salt-high-light - .ag-theme-salt-medium-light - .ag-theme-salt-low-light - .ag-theme-salt-touch-light + .ag-theme-salt-light
- .ag-theme-salt-high-compact-light + .ag-theme-salt-compact-light
In dark mode:
- .ag-theme-salt-high-dark - .ag-theme-salt-medium-dark - .ag-theme-salt-low-dark - .ag-theme-salt-touch-dark + .ag-theme-salt-dark
- .ag-theme-salt-high-compact-dark + .ag-theme-salt-compact-dark
Closes #2972