Update icons

packages/ui/src/components/checkbox/checkbox.tsx

@@ -1,7 +1,7 @@
 import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { IconUi3CheckboxCheck16 } from '../../icons/icon-16/icon-ui-3-checkbox-check-16.js'
+import { IconCheck16 } from '../../icons/icon-16/icon-check-16.js'
 import { Event, EventHandler } from '../../types/event-handler.js'
 import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
@@ -75,7 +75,7 @@ export const Checkbox = createComponent<HTMLInputElement, CheckboxProps>(
         <div class={styles.box}>
           {value === true ? (
             <div class={styles.checkIcon}>
-              <IconUi3CheckboxCheck16 />
+              <IconCheck16 />
             </div>
           ) : null}
         </div>

packages/ui/src/components/disclosure/disclosure.module.css

@@ -33,11 +33,7 @@
 .title .icon {
   position: absolute;
   left: var(--space-0);
-  display: none;
-  color: var(--figma-color-icon-tertiary);
-}
-.input:hover ~ .title .icon {
-  display: block;
+  color: var(--figma-color-icon);
 }
 .input:checked ~ .title .icon {
   transform: rotate(90deg);

packages/ui/src/components/disclosure/disclosure.tsx

@@ -1,7 +1,7 @@
 import { ComponentChildren, Fragment, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { IconUi3DisclosureChevron16 } from '../../icons/icon-16/icon-ui-3-disclosure-chevron-16.js'
+import { IconChevronRight16 } from '../../icons/icon-16/icon-chevron-right-16.js'
 import { Event, EventHandler } from '../../types/event-handler.js'
 import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -57,7 +57,7 @@ export const Disclosure = createComponent<HTMLInputElement, DisclosureProps>(
           />
           <div class={styles.title}>
             <div class={styles.icon}>
-              <IconUi3DisclosureChevron16 />
+              <IconChevronRight16 />
             </div>
             {title}
           </div>

packages/ui/src/components/dropdown/dropdown.module.css

@@ -61,7 +61,7 @@
 }
 
 .chevronIcon {
-  padding-right: calc(var(--space-8) - var(--border-width-1));
+  padding-right: var(--space-4);
   color: var(--figma-color-icon);
 }
 .disabled .chevronIcon {

packages/ui/src/components/dropdown/dropdown.tsx

@@ -5,8 +5,8 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import menuStyles from '../../css/menu.module.css'
 import { useMouseDownOutside } from '../../hooks/use-mouse-down-outside.js'
 import { useScrollableMenu } from '../../hooks/use-scrollable-menu.js'
-import { IconControlChevronDown8 } from '../../icons/icon-8/icon-control-chevron-down-8.js'
-import { IconMenuCheckmarkChecked16 } from '../../icons/icon-16/icon-menu-checkmark-checked-16.js'
+import { IconCheck16 } from '../../icons/icon-16/icon-check-16.js'
+import { IconChevronDown16 } from '../../icons/icon-16/icon-chevron-down-16.js'
 import { Event, EventHandler } from '../../types/event-handler.js'
 import { createClassName } from '../../utilities/create-class-name.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -322,7 +322,7 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
           <div class={dropdownStyles.value}>{children}</div>
         )}
         <div class={dropdownStyles.chevronIcon}>
-          <IconControlChevronDown8 />
+          <IconChevronDown16 />
         </div>
         {createPortal(
           <div
@@ -382,7 +382,7 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
                   />
                   {option.value === value ? (
                     <div class={menuStyles.checkIcon}>
-                      <IconMenuCheckmarkChecked16 />
+                      <IconCheck16 />
                     </div>
                   ) : null}
                   {typeof option.text === 'undefined'

packages/ui/src/components/icon-button/stories/icon-button.stories.tsx

@@ -2,7 +2,7 @@
 import { h, JSX } from 'preact'
 
 import { useInitialFocus } from '../../../hooks/use-initial-focus/use-initial-focus.js'
-import { IconPlus32 } from '../../../icons/icon-32/icon-plus-32.js'
+import { IconPlus24 } from '../../../icons/icon-24/icon-plus-24.js'
 import { IconButton } from '../icon-button.js'
 
 export default {
@@ -15,7 +15,7 @@ export const Passive = function () {
   }
   return (
     <IconButton onClick={handleClick}>
-      <IconPlus32 />
+      <IconPlus24 />
     </IconButton>
   )
 }
@@ -26,7 +26,7 @@ export const Focused = function () {
   }
   return (
     <IconButton {...useInitialFocus()} onClick={handleClick}>
-      <IconPlus32 />
+      <IconPlus24 />
     </IconButton>
   )
 }
@@ -37,7 +37,7 @@ export const Disabled = function () {
   }
   return (
     <IconButton disabled onClick={handleClick}>
-      <IconPlus32 />
+      <IconPlus24 />
     </IconButton>
   )
 }

packages/ui/src/components/icon-toggle-button/stories/icon-toggle-button-selected.stories.tsx

@@ -3,7 +3,7 @@ import { h, JSX } from 'preact'
 import { useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../hooks/use-initial-focus/use-initial-focus.js'
-import { IconEllipsis32 } from '../../../icons/icon-32/icon-ellipsis-32.js'
+import { IconEllipsis24 } from '../../../icons/icon-24/icon-ellipsis-24.js'
 import { IconToggleButton } from '../icon-toggle-button.js'
 
 export default {
@@ -20,7 +20,7 @@ export const Passive = function () {
   }
   return (
     <IconToggleButton onChange={handleChange} value={value}>
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }
@@ -38,7 +38,7 @@ export const Focused = function () {
       onChange={handleChange}
       value={value}
     >
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }
@@ -49,7 +49,7 @@ export const Disabled = function () {
   }
   return (
     <IconToggleButton disabled onChange={handleChange} value={true}>
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }
@@ -62,7 +62,7 @@ export const OnValueChange = function () {
   }
   return (
     <IconToggleButton onValueChange={handleValueChange} value={value}>
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }

packages/ui/src/components/icon-toggle-button/stories/icon-toggle-button-unselected.stories.tsx

@@ -3,7 +3,7 @@ import { h, JSX } from 'preact'
 import { useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../hooks/use-initial-focus/use-initial-focus.js'
-import { IconEllipsis32 } from '../../../icons/icon-32/icon-ellipsis-32.js'
+import { IconEllipsis24 } from '../../../icons/icon-24/icon-ellipsis-24.js'
 import { IconToggleButton } from '../icon-toggle-button.js'
 
 export default {
@@ -20,7 +20,7 @@ export const Passive = function () {
   }
   return (
     <IconToggleButton onChange={handleChange} value={value}>
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }
@@ -38,7 +38,7 @@ export const Focused = function () {
       onChange={handleChange}
       value={value}
     >
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }
@@ -49,7 +49,7 @@ export const Disabled = function () {
   }
   return (
     <IconToggleButton disabled onChange={handleChange} value={false}>
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }
@@ -62,7 +62,7 @@ export const OnValueChange = function () {
   }
   return (
     <IconToggleButton onValueChange={handleValueChange} value={value}>
-      <IconEllipsis32 />
+      <IconEllipsis24 />
     </IconToggleButton>
   )
 }

packages/ui/src/components/modal/modal.module.css

@@ -66,6 +66,9 @@
   border-bottom-width: 1px;
 }
 
+.closeButton {
+  display: flex;
+}
 .closeButtonLeft {
   order: -1;
 }
@@ -82,7 +85,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.5); /* FIXME */
+  background-color: var(--color-bg-overlay);
   opacity: 0;
   pointer-events: none;
   transition: opacity ease 0.3s;

packages/ui/src/components/modal/modal.tsx

@@ -1,7 +1,7 @@
 import { ComponentChild, h, RefObject, render } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 
-import { IconCross32 } from '../../icons/icon-32/icon-cross-32.js'
+import { IconClose24 } from '../../icons/icon-24/icon-close-24.js'
 import { EventHandler } from '../../types/event-handler.js'
 import { createClassName } from '../../utilities/create-class-name.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -31,7 +31,7 @@ export type ModalPosition = 'bottom' | 'center' | 'left' | 'right'
 export const Modal = createComponent<HTMLDivElement, ModalProps>(function (
   {
     children,
-    closeButtonIcon = <IconCross32 />,
+    closeButtonIcon = <IconClose24 />,
     closeButtonPosition = 'right',
     open,
     transition = true,
@@ -170,11 +170,12 @@ export const Modal = createComponent<HTMLDivElement, ModalProps>(function (
                 </div>
                 {typeof onCloseButtonClick === 'undefined' ? null : (
                   <div
-                    class={
+                    class={createClassName([
+                      styles.closeButton,
                       closeButtonPosition === 'left'
                         ? styles.closeButtonLeft
-                        : undefined
-                    }
+                        : null
+                    ])}
                   >
                     <IconButton onClick={onCloseButtonClick}>
                       {closeButtonIcon}

packages/ui/src/components/range-slider/range-slider.module.css

@@ -31,7 +31,7 @@
   display: block;
   width: var(--space-16);
   height: var(--space-16);
-  border: var(--border-width-4) solid var(--figma-color-bg);
+  border: var(--border-width-4) solid var(--figma-color-icon-onbrand);
   border-radius: var(--space-8);
   -webkit-appearance: none;
   appearance: none;

packages/ui/src/components/search-textbox/search-textbox.module.css

@@ -23,8 +23,8 @@
 
 .searchIcon {
   position: absolute;
-  top: var(--space-0);
-  left: var(--space-0);
+  top: var(--space-4);
+  left: var(--space-4);
   color: var(--figma-color-icon-secondary);
   pointer-events: none; /* so that clicking the icon focuses the textbox */
 }
@@ -41,7 +41,7 @@
   right: var(--space-0);
   width: var(--space-32);
   height: var(--space-32);
-  padding: var(--space-4);
+  padding: calc(var(--space-4) - var(--border-width-1));
   color: var(--figma-color-icon-secondary);
 }
 .searchTextbox:not(.disabled) .clearButton:hover,
@@ -53,18 +53,13 @@
 }
 
 .clearButtonBox {
-  width: var(--space-24);
-  height: var(--space-24);
+  display: block;
   border: var(--border-width-1) solid transparent;
   border-radius: var(--border-radius-4);
 }
 .searchTextbox:not(.disabled) .clearButton:focus-visible .clearButtonBox {
   border-color: var(--figma-color-border-selected);
 }
-
-.crossIcon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.clearButtonBox svg {
+  display: block;
 }