new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

dropdown/color

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Dropdown color tokens

Dropdown components use the following color tokens: Label text uses $text-secondary. Field text uses $text-primary, and prompt text uses $text-helper. Helper text uses $text-helper. Field background uses $field and border-bottom uses $border-strong. Chevron icon uses $icon-primary. Vertical divider uses $border-subtle. Menu options use $text-secondary for text and $layer for background with $border-subtle on border-top. Menu box-shadow is 0 2px 6px 0 rgba(0,0,0,.2). Checkbox icon background uses $icon-primary, check uses $icon-inverse, and border uses $icon-primary. Contextual color tokens marked with * will change values based on the layer they are placed on.

Dropdown focus state colors

When a dropdown field has focus, the border color is $focus.

Dropdown hover state colors

On hover, the dropdown field background-color is $field-hover and menu option background-color is $layer-hover. Menu option text-color changes to $text-primary.

Dropdown active state colors

When a menu option is active, its background-color is $layer-active.

Dropdown selected state colors

In selected state, the chevron icon uses $icon-primary, vertical divider border is $border-subtle, close icon uses $icon-primary, and menu option background-color is $layer-selected with checkmark in $icon-primary.

Dropdown multiselected state colors

When items are multiselected, tags use $background-inverse for background-color and $text-inverse for text-color.

Dropdown disabled state colors

In disabled state, the field background-color is $field. In default variant, field border-bottom is transparent; in fluid variant, it is $border-subtle. Field text-color is $text-disabled, label text-color is $text-disabled, and chevron icon is $icon-disabled.

Dropdown read-only state colors

In read-only state, field border-bottom is $border-subtle. In default variant, field background-color is transparent; in fluid variant, it is $field. Label text-color is $text-secondary. In default variant, field text-color is $text-primary; in fluid variant, it is $text-secondary. Tags have transparent background-color with $border-subtle border. In default variant, tag text-color is $text-primary; in fluid variant, it is $text-secondary. Tag svg uses $icon-disabled.

Inline dropdown color states

Inline dropdown enabled state: field background-color is transparent, field text is $text-primary, chevron icon is $icon-primary, menu option text is $text-secondary, menu option background is $layer. Hover state: field background is $field-hover, menu option background is $layer-hover, menu option text is $text-primary. Active state: menu option background is $layer-active. Selected state: menu option background is $layer-selected, checkmark is $icon-primary. Invalid state: field border is $support-error, error message text is $text-error, error icon is $support-error.

Give your agent this brain