Figma
Star462

Core package changelog


  • 38a72ad0c(link takes you to an external page) #2753(link takes you to an external page) Thanks @TheSisb(link takes you to an external page)! - [Switch] Updated Switch component API to match other form components in Paste.

    • SwitchContainer has been replaced with SwitchGroup
    • SwitchGroup props changes:
      • removes id?: string
      • removes label: ReactNode - use the new legend prop instead.
      • adds legend: string | NonNullable<React.ReactNode> to replace the old label prop.
      • adds errorText?: string | React.ReactNode to handle error states.
      • adds orientation?: 'vertical' | 'horizontal; to set children orientation.
      • adds i18nRequiredLabel?: string to change the required label for internationalization.
      • adds name: string to label the switch group for forms.
      • adds onChange?: (checked: boolean) => void to handle changes to any child Switch's checked state in a single function.
      • helpText prop now accepts a string.
      • required prop is now optional.
      • element prop default value changed to SWITCH_GROUP from SWITCH_CONTAINER
    • Switch props changes:
      • children prop type changed to NonNullable<React.ReactNode>
      • adds hasError?: boolean to handle error states.
      • adds helpText?: string | React.React.Node to add additional context to a switch.
      • adds checked?: boolean to use the Switch in a controlled manner.
      • adds defaultChecked?: boolean to set the default checked value in an uncontrolled manner.
  • 0cd424df4(link takes you to an external page) #2184(link takes you to an external page) Thanks @loreina(link takes you to an external page)! - [design-tokens] Update alias and add new tokens to be accessible in Dark theme

    • Aliases
      • Added a new alias palette-gray-110
    • Global: background-color
      • Updated color-background-inverse to gray-90
      • Updated color-background-inverse-strong to gray-80
    • Global: border color
      • Added color-border-inverse-weakest token pointing to gray-90
      • Updated color-border-inverse-weaker to gray-80
      • Updated color-border-inverse to gray-50
      • Updated color-border-inverse-strong to gray-20
      • Updated color-border-inverse-stronger to gray-10
      • Neutral
        • Updated color-border-neutral-weak to blue-40
      • Added color-border-error-stronger token pointing to red-90
    • Global: box shadow
      • Added shadow-border-error-stronger pointing to red-90
      • Added shadow-border-inverse-weakest pointing to gray-90
      • Updated shadow-border-inverse-weaker to gray-80
      • Updated shadow-border-inverse to gray-50
        • Updated shadow-border-inverse-strong to gray-20
        • Updated shadow-border-inverse-stronger to gray-10
    • Dark theme: background color
      • Updated color-background to gray-100
      • Updated color-background-strong to gray-90
      • Updated color-background-stronger to gray-80
      • Updated color-background-inverse to gray-90
      • Updated color-background-inverse-strong to gray-80
      • Updated color-background-body to new alias gray-110
      • Updated color-background-overlay to palette-gray-100-transparent-90
      • Updated color-background-row-striped to gray-100
      • Updated color-background-subaccount to gray-90
      • Updated color-background-trial to green-100
      • Brand
        • Updated color-background-brand to gray-100
        • Updated color-background-brand-strong to gray-90
      • Primary
        • Updated color-background-primary-strongest to blue-10
        • Updated color-background-primary-stronger to blue-20
        • Updated color-background-primary-strong to blue-30
        • Updated color-background-primary to blue-60
        • Updated color-background-primary-weak to gray-80
        • Updated color-background-primary-weaker to gray-90
        • Updated color-background-primary-weakest to gray-100
      • Destructive
        • Updated color-background-destructive-strongest to red-10
        • Updated color-background-destructive-stronger to red-20
        • Updated color-background-destructive-strong to red-30
        • Updated color-background-destructive to red-60
        • Updated color-background-destructive-weak to gray-80
        • Updated color-background-destructive-weaker to gray-90
        • Updated color-background-destructive-weakest to gray-100
      • Success
        • Updated color-background-success to green-60
      • Warning
        • Updated color-background-warning to orange-60
      • Error
        • Added color-background-error-stronger pointing to red-20
        • Updated color-background-error-strong to red-40
        • Updated color-background-error to red-60
    • Dark theme: border color
      • Updated color-border-weak to gray-80
      • Updated color-border-weaker to gray-90
      • Inverse
        • Removed color-border-inverse-weaker
        • Removed color-border-inverse
        • Removed color-border-inverse-strong
        • Removed color-border-inverse-stronger
        • Removed color-border-inverse-strongest
      • Primary
        • Updated color-border-primary-strongest to blue-10
        • Updated color-border-primary-stronger to blue-20
        • Updated color-border-primary-strong to blue-30
        • Updated color-border-primary to blue-60
        • Updated color-border-primary-weak to gray-80
        • Updated color-border-primary-weaker to gray-90
        • Updated color-border-primary-weakest to gray-100
      • Destructive
        • Updated color-border-destructive-strongest to red-10
        • Updated color-border-destructive-stronger to red-20
        • Updated color-border-destructive-strong to red-30
        • Updated color-border-destructive to red-60
        • Updated color-border-destructive-weak to gray-80
        • Updated color-border-destructive-weaker to gray-90
        • Updated color-border-destructive-weakest to gray-100
      • Success
        • Updated color-border-success to green-60
        • Updated color-border-success-weak to green-70
      • Warning
        • Updated color-border-warning to orange-60
        • Updated color-border-warning-weak to orange-70
      • Error
        • Added color-border-error-stronger pointing to red-20
        • Updated color-border-error-strong to red-30
        • Updated color-border-error to red-60
        • Updated color-border-error-weak to red-70
      • Neutral
        • Updated color-border-neutral to blue-60
        • Updated color-border-neutral-weak to blue-70
    • Dark theme: box shadow
      • Elevation
        • Update shadow-elevation-10 to black-transparent-40
        • Update shadow-elevation-20 to black-transparent-50
        • Update shadow-elevation-30 to black-transparent-50
      • Focus
        • Updated shadow-focus to gray-60
        • Updated shadow-focus-inverse to gray-50
        • Updated shadow-focus-inset to gray-60
      • Primary
        • Updated shadow-border-primary to blue-60
      • Destructive
        • Updated shadow-border-destructive to red-60
        • Updated shadow-border-destructive-strong to red-30
        • Updated shadow-border-destructive-stronger to red-20
        • Updated shadow-border-destructive-strongest to red-10
      • Error
        • Updated shadow-border-error to red-60
        • Updated shadow-border-error-strong to red-30
      • Inverse
        • Removed shadow-border-inverse-weaker
        • Removed shadow-border-inverse
        • Removed shadow-border-inverse-strong
        • Removed shadow-border-inverse-stronger
        • Removed shadow-border-inverse-strongest
    • Dark theme: text color
      • Updated color-text-weak to gray-50
      • Updated color-text-weaker to gray-80
      • Updated color-text-weakest to new alias gray-110
      • Updated color-text-inverse-weaker to gray-70
      • Link
        • Updated color-text-link-weak to gray-80
        • Updated color-text-link-stronger to gray-0
        • Updated color-text-link-destructive-weak to gray-80
        • Updated color-text-link-destructive-stronger to gray-0
      • Success
        • Updated color-text-success to green-30
      • Neutral
        • Updated color-text-neutral to blue-20
      • New
        • Updated color-text-new to purple-20
      • Icon
        • Updated color-text-icon to gray-50
  • 0cd424df4(link takes you to an external page) #2184(link takes you to an external page) Thanks @loreina(link takes you to an external page)! - [radio-group]

    • Add new customization element RADIO_CONTROL_CIRCLE to controls the styles of the circle within the radio button
    • Update default color to colorTextWeakest
    • Update hover text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update focus text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update active text color to colorTextWeakest
    • Update checked text color to colorTextInverse
    • Update invalid and hover border color to colorBorderErrorStronger
    • Update checked and hover text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and focus text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and disabled text color to colorTextWeakest
    • Update checked and invalid text color to colorTextInverse
    • Update checked and invalid and hover background color to colorBackgroundErrorStronger and border color to colorBorderErrorStronger
  • 563a76ba3(link takes you to an external page) #2249(link takes you to an external page) Thanks @nkrantz(link takes you to an external page)! - [checkbox]

    • Update the check icon to inherit color from BaseRadioCheckbox
    • Update selectAll background color to default to colorBackground, and use colorBackgroundPrimaryWeakest when checked and not disabled or indeterminate and not disabled
    • Update default color to colorTextWeakest
    • Update hover text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update focus text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update active text color to colorTextWeakest
    • Update checked text color to colorTextInverse
    • Update invalid and hover border color to colorBorderErrorStronger
    • Update checked and hover text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and focus text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and disabled text color to colorTextWeakest
    • Update checked and invalid text color to colorTextInverse
    • Update checked and invalid and hover background color to colorBackgroundErrorStronger and border color to colorBorderErrorStronger
To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.