Skip to main content

This page has been translated using TexTra by NICT. Please note that the translation may not be completely accurate.
If you find any mistranslations, we appreciate your feedback on the "Request form for improving the automatic translation ".

[Version 1.4.1] Modified or updated styles and components

Version 1.4.1 has been released. The corrections and updates this time are as follows.

Global Update

Color 2.0 library applied to all "components"

  • The library of previously updated styles, "Color 2.0", has been applied to all color settings used by the component.

"Focused" in the "Component" state has been unified into "Focus".

  • Since "Focused" and "Focus" were mixed in the state expression of components, they were unified into "Focus".

Changed the "Dummy" icon.

  • Changed the "Dummy" icon used as a placeholder. All components that used the "Dummy" icon have been replaced with the new icon.

Update Style color 2.0

  • Primitive Color 2.0's Grey-417 (#949494) did not meet the non-text Trust requirement of a 3:1 con Trust ratio, so we have fixed it as Grey-420 (#959595).

Adding the Focus Color to the Styles Library

  • I had set the Color Style of the focus indicator to Yellow-700 and Light Blue-700 with primitive color 2.0, but I named them as "Focus" items as Focus-Blue and Focus-Yellow, respectively, and added them to the library of "Color 2.0" (there is no change to the actual color itself).

[Style] Semantic Color Error Definition Sentence Fix

  • Fix the semantic color Error statement to explicitly state that it should be used not only for failures and errors, but also for alerting as a constraint indication (e.g., showing "required" in a form).

Style Change the color of link text

The color of the link text in each state has been changed. The changed state colors are as follows.

  • Normal: Blue-1000
  • Hover: Blue-900
  • Active: Orange-700
  • Visited: Magenta-900

In the future, the link color of the text in each component will follow this link text style, and variations in link text color will be added in the future.

[Component] Modify Emergency Banner Text

  • Corrected the text for "Emergency Banner Parts".

Change the "Required" label, error frame, and error text for the Component form control

  • Changed the "Mandatory" label, error frame, and error text used for all components of the form control to "Semantic" "Error-1" as specified in "Color 2.0". (The actual color itself has not been changed.)

[Component] Changed the lineweight of the "Focus" display for "Text Input", "Text Area", and "Selector"

  • The lineweight of the Focus display (the border that appears when you type and when you use the keyboard) for the Text Input, Text Area, and Selector components has been changed from 2 px to 4 px.

[Component] Changed the color of "Hover" and "Active" in "Breadcrumbs".

  • The colors of the Hover and Active standard components have changed due to a change in the style definition of link text.

[Component] Changed color for "Selected" in "Language Selector"

  • Changed the "Selected" background color to Blue-100.

[Component] Changed color for "Selected" in "Menu List"

  • Changed the "Selected" background color to Color Blue-100.

[Component] The basic component of the "Notification Banner" has been changed.

  • In order to eliminate link-in links (including different link elements within the link), we have divided the link into "when the entire banner is a link" and "when only the title is a link" and added components for each. In addition, we have avoided using the "close" button in combination with the normal button element.

[Component] Added example of "Resource List"

  • Added "Example of a Resource List Representing a Visual Visited Link" example.

Design Data

You can view design Figma from the Data Community provided by the design tool Figma.

Figma Community

Related Links