The third-generation Sign In Widget enhances accessibility and focus management and establishes a foundation for improvements in customization and globalization. Design tokens can be used to give the third-generation widget a custom style.

• Okta Identity Engine (OIE)
• Sign-In Widget (third generation)
• Custom Sign-In Widget

Customizations made in the second-generation widget will not be propagated to the third-generation one. Thus, to style the look of the third-generation widget, new customizations need to be added according to the available features.

The third-gen Sign-In Widget makes use of Design Tokens to customize and override default values for the following:

• Color
• Border
• Font family
• Font size
• Font weight
• Line height
• Spacing

var config = OktaUtil.getSignInWidgetConfig();
config.theme = {
    "tokens": {
        "TypographyColorBody": "#D11DCA",
        "PalettePrimaryMain": "#272727",
        "HueYellow100": "#00FFFF"
        }
    };

{
  "BorderColorDisplay": "#e1e1e1",
  "BorderColorDisabled": "#e1e1e1",
  "BorderColorDangerLight": "#fe8f7a",
  "BorderColorDangerControl": "#e72500",
  "BorderColorDangerDark": "#951800",
  "BorderColorPrimaryControl": "#546be7",
  "BorderColorPrimaryDark": "#2e40a5",
  "BorderRadiusTight": "4px",
  "BorderRadiusMain": "6px",
  "BorderStyleMain": "solid",
  "BorderWidthMain": "1px",
  "FocusOutlineColorPrimary": "#546be7",
  "FocusOutlineOffsetMain": "2px",
  "FocusOutlineOffsetTight": "0",
  "FocusOutlineStyle": "solid",
  "FocusOutlineWidthMain": "2px",
  "FocusOutlineWidthTight": "1px",
  "HueNeutral50": "#f4f4f4",
  "HueNeutral100": "#ededed",
  "HueNeutral200": "#e1e1e1",
  "HueNeutral300": "#cbcbcb",
  "HueNeutral400": "#aeaeae",
  "HueNeutral500": "#8d8d8d",
  "HueNeutral600": "#6e6e6e",
  "HueNeutral700": "#4b4b4b",
  "HueNeutral800": "#383838",
  "HueNeutral900": "#272727",
  "HueNeutralWhite": "#ffffff",
  "HueBlue50": "#f2f3fd",
  "HueBlue100": "#dbe0fa",
  "HueBlue200": "#c1c9f6",
  "HueBlue300": "#9daaf1",
  "HueBlue400": "#7286eb",
  "HueBlue500": "#546be7",
  "HueBlue600": "#4c64e1",
  "HueBlue700": "#2e40a5",
  "HueBlue800": "#22307c",
  "HueBlue900": "#182257",
  "HueGreen50": "#defae7",
  "HueGreen100": "#94f5b3",
  "HueGreen200": "#7be09e",
  "HueGreen300": "#59c282",
  "HueGreen400": "#31a061",
  "HueGreen500": "#16884a",
  "HueGreen600": "#197f48",
  "HueGreen700": "#0e562f",
  "HueGreen800": "#0a4023",
  "HueGreen900": "#072e19",
  "HueRed50": "#fff0ee",
  "HueRed100": "#ffd8d1",
  "HueRed200": "#febbae",
  "HueRed300": "#fe8f7a",
  "HueRed400": "#fd4e2d",
  "HueRed500": "#e72500",
  "HueRed600": "#d92300",
  "HueRed700": "#951800",
  "HueRed800": "#711200",
  "HueRed900": "#500d00",
  "HueYellow50": "#fcf6ac",
  "HueYellow100": "#fce101",
  "HueYellow200": "#f9c503",
  "HueYellow300": "#eb9e05",
  "HueYellow400": "#bf8004",
  "HueYellow500": "#a16c03",
  "HueYellow600": "#966603",
  "HueYellow700": "#664402",
  "HueYellow800": "#4c3302",
  "HueYellow900": "#352401",
  "PalettePrimaryLighter": "#f2f3fd",
  "PalettePrimaryLight": "#9daaf1",
  "PalettePrimaryMain": "#546be7",
  "PalettePrimaryDark": "#2e40a5",
  "PalettePrimaryDarker": "#22307c",
  "PalettePrimaryText": "#4c64e1",
  "PalettePrimaryHeading": "#182257",
  "PalettePrimaryHighlight": "#dbe0fa",
  "PaletteDangerLighter": "#fff0ee",
  "PaletteDangerLight": "#fe8f7a",
  "PaletteDangerMain": "#e72500",
  "PaletteDangerDark": "#951800",
  "PaletteDangerDarker": "#711200",
  "PaletteDangerText": "#d92300",
  "PaletteDangerHeading": "#500d00",
  "PaletteDangerHighlight": "#ffd8d1",
  "PaletteWarningLighter": "#fcf6ac",
  "PaletteWarningLight": "#eb9e05",
  "PaletteWarningMain": "#a16c03",
  "PaletteWarningDark": "#664402",
  "PaletteWarningDarker": "#4c3302",
  "PaletteWarningText": "#966603",
  "PaletteWarningHeading": "#352401",
  "PaletteWarningHighlight": "#fce101",
  "PaletteSuccessLighter": "#defae7",
  "PaletteSuccessLight": "#59c282",
  "PaletteSuccessMain": "#16884a",
  "PaletteSuccessDark": "#0e562f",
  "PaletteSuccessDarker": "#0a4023",
  "PaletteSuccessText": "#197f48",
  "PaletteSuccessHeading": "#072e19",
  "PaletteSuccessHighlight": "#94f5b3",
  "Spacing0": "0",
  "Spacing1": "0.28571429rem",
  "Spacing2": "0.57142857rem",
  "Spacing3": "0.85714286rem",
  "Spacing4": "1.14285714rem",
  "Spacing5": "1.71428571rem",
  "Spacing6": "2.28571429rem",
  "Spacing7": "2.85714286rem",
  "Spacing8": "3.42857143rem",
  "Spacing9": "4rem",
  "TransitionDurationMain": "100ms",
  "TypographyColorBody": "#272727",
  "TypographyColorHeading": "#272727",
  "TypographyColorInverse": "#ffffff",
  "TypographyColorSupport": "#4b4b4b",
  "TypographyColorSubordinate": "#6e6e6e",
  "TypographyColorDisabled": "#aeaeae",
  "TypographyColorAction": "#4c64e1",
  "TypographyColorDanger": "#d92300",
  "TypographyColorSuccess": "#197f48",
  "TypographyColorWarning": "#966603",
  "TypographyFamilyBody": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif",
  "TypographyFamilyHeading": "'Aeonik', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif",
  "TypographyFamilyButton": "'Aeonik', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif",
  "TypographySizeSubordinate": "0.857rem",
  "TypographySizeBody": "1rem",
  "TypographySizeHeading6": "1.143rem",
  "TypographySizeHeading5": "1.286rem",
  "TypographySizeHeading4": "1.571rem",
  "TypographySizeHeading3": "2rem",
  "TypographySizeHeading2": "2.286rem",
  "TypographySizeHeading1": "2.571rem",
  "TypographyWeightBody": "400",
  "TypographyWeightBodyBold": "600",
  "TypographyWeightHeading": "500",
  "TypographyWeightHeadingBold": "700",
  "TypographyLineHeightBody": 1.5,
  "TypographyLineHeightUi": 1.2,
  "TypographyLineHeightOverline": 1.3,
  "TypographyLineHeightHeading6": 1.3,
  "TypographyLineHeightHeading5": 1.3,
  "TypographyLineHeightHeading4": 1.25,
  "TypographyLineHeightHeading3": 1.25,
  "TypographyLineHeightHeading2": 1.2,
  "TypographyLineHeightHeading1": 1.2,
  "TypographyLineLengthMax": "55ch"
}