temp

Outline

• New design tokens
• Migrating theme
• Deprecated modules
• Color deprecated
• Text deprecated
• TextStyleHelper deprecated
• MediaQuery deprecated
• MediaWidths deprecated

New design tokens

https://dev.designsystem.lifesg.io/react/index.html?path=/docs/foundations-introduction--docs

(info on new design tokens, link to storybook)

Migrating themes

BaseTheme => LifeSGTheme https://dev.designsystem.lifesg.io/react/index.html?path=/docs/foundations-themes-introduction--docs

(info on new scheme keys)

(info on new overrides)

Typescript support for custom columns

declare module "styled-components" {
    export interface DefaultTheme extends ThemeSpec {
        maxColumns?: {
            xxs: 8;
            xs: 8;
            sm: 8;
            md: 8;
            lg: 12;
            xl: 12;
            xxl: 12;
        };
    }
}

Deprecated modules

• Color
• DesignToken
• Layout
• MediaQuery
• Text

<codemod command>

Color deprecated

V2 usage

V3 usage

https://dev.designsystem.lifesg.io/react/index.html?path=/docs/foundations-colours-introduction--docs

Automated migration

<codemod command>

Text deprecated

V2 usage

V3 usage

Automated migration

<codemod command>

TextStyleHelper deprecated

V2 usage

V3 usage

https://dev.designsystem.lifesg.io/react/index.html?path=/docs/foundations-typography-introduction--docs

Automated migration

MediaQuery deprecated

V2 usage

V3 usage

Automated migration

<codemod command>

Removed !important from font styles

(more info to be added)

Migrating Layout

V2 usage

V3 usage

Migrating Layout.ColDiv

V2 usage

V3 usage