Skip to content

Releases: jpmorganchase/salt-ds

@salt-ds/theme@1.18.0

10 Jun 15:52
100f972
Compare
Choose a tag to compare

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 from var(--salt-opacity-40) to var(--salt-opacity-45).
  • 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

10 Jun 15:52
100f972
Compare
Choose a tag to compare

Minor Changes

  • d0b6912: Added Display4 text.

    <Display4>text</Display>
    <Text styleAs="display4">text</Text>
    

    It will be using different size when used in SaltProvider and UNSTABLE_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.

Patch Changes

  • 72debf5: Fixed empty Switch label span being rendered. Closes #3505.
  • 3b854ed: Fixed SegmentedButtonGroup incorrectly rounding when theme next is used and corner="rounded".

@salt-ds/lab@1.0.0-alpha.47

10 Jun 15:52
100f972
Compare
Choose a tag to compare
Pre-release

Minor Changes

  • 400c730: Added Divider component—Divider provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.

    <Divider />
    <Divider variant={variant} orientation={orientation} />

Patch Changes

  • a92c421: Fixed date picker shown behind dialog. Fixed #3471

@salt-ds/theme@1.17.0

31 May 17:47
16cc62a
Compare
Choose a tag to compare

Minor Changes

Patch Changes

  • 353e917: Updated status tokens for theme next to match latest design

@salt-ds/icons@1.12.0

31 May 17:46
16cc62a
Compare
Choose a tag to compare

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

31 May 17:46
16cc62a
Compare
Choose a tag to compare

Patch Changes

  • f8de151: Fixed the chevron alignment for multi-line accordions.
  • a555602: Fixed Text components not applying className correctly, including Code, Display1, Display2, Display3, TextAction, TextNotation.

@salt-ds/lab@1.0.0-alpha.46

31 May 17:47
16cc62a
Compare
Choose a tag to compare
Pre-release

Patch Changes

  • 04a6fb8: - Remove validation logic from DatePicker to support integration through FormField.
    • Added onSelect onSelectionChange and validationStatus props to DatePicker.

@salt-ds/theme@1.16.0

24 May 16:52
2cb267b
Compare
Choose a tag to compare

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

24 May 16:52
2cb267b
Compare
Choose a tag to compare

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 to UNSTABLE_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 to UNSTABLE_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 and onFocus 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 the status prop changed from "info" to undefined. 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

24 May 16:52
2cb267b
Compare
Choose a tag to compare

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:

    1. 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";
    1. Update classnames used on the container around AgGridReact, which no longer has density portion. If you previously copied useAgGridHelpers, 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

Patch Changes

  • Updated dependencies [25e38e4]
  • Updated dependencies [eaab9d8]
  • Updated dependencies [5ed8ed8]
  • Updated dependencies [e1d4aab]
    • @salt-ds/theme@1.16.0