modernize some css

shared/chat/conversation/input-area/normal2/platform-input.desktop.tsx

@@ -515,7 +515,6 @@ const styles = Kb.Styles.styleSheetCreate(
       input: Kb.Styles.platformStyles({
         isElectron: {
           backgroundColor: Kb.Styles.globalColors.transparent,
-          height: 22,
           // Line height change is so that emojis (unicode characters inside
           // textarea) are not clipped at the top. This change is accompanied by
           // a change in padding to offset the increased line height

shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import {urlsToImgSet} from '@/common-adapters/icon.desktop'
 import type {Props} from '.'
-import {getAssetPath} from '@/constants/platform.desktop'
 import {useColorScheme} from 'react-native'
 
 export const animationDuration = 2000
@@ -59,7 +57,6 @@ const ExplodingHeightRetainer = (p: Props) => {
 
 const Ashes = (props: {doneExploding: boolean; exploded: boolean; explodedBy?: string; height: number}) => {
   const {doneExploding, explodedBy, exploded, height} = props
-  const isDarkMode = useColorScheme() === 'dark'
   let explodedTag: React.ReactNode = null
   if (doneExploding) {
     explodedTag = explodedBy ? (
@@ -87,26 +84,8 @@ const Ashes = (props: {doneExploding: boolean; exploded: boolean; explodedBy?: s
 
   return (
     <div
-      className={Kb.Styles.classNames('ashbox', {'full-width': exploded})}
-      style={Kb.Styles.castStyleDesktop(
-        Kb.Styles.collapseStyles([
-          styles.ashBox,
-          Kb.Styles.platformStyles({
-            isElectron: {
-              backgroundImage:
-                (isDarkMode
-                  ? urlsToImgSet(
-                      {'68': getAssetPath('images', 'icons', 'dark-pattern-ashes-desktop-400-68.png')},
-                      68
-                    )
-                  : urlsToImgSet(
-                      {'68': getAssetPath('images', 'icons', 'pattern-ashes-desktop-400-68.png')},
-                      68
-                    )) ?? '',
-            },
-          }),
-        ])
-      )}
+      className={Kb.Styles.classNames('ashbox', 'ashes-bg', {'full-width': exploded})}
+      style={Kb.Styles.castStyleDesktop(Kb.Styles.collapseStyles([styles.ashBox]))}
     >
       {exploded && explodedTag}
       <FlameFront height={height} stop={doneExploding} />

shared/common-adapters/avatar/avatar.css

@@ -127,29 +127,17 @@
 
 /* Background layer - no border-radius needed, parent clips via overflow */
 .avatar-background {
-  background-color: var(--color-greyLight);
-  bottom: 0;
-  left: 0;
+  background-color: light-dark(var(--color-greyLight), #0f0f0f);
   position: absolute;
-  right: 0;
-  top: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .avatar-background {
-    background-color: #0f0f0f;
-  }
+  inset: 0;
 }
 
 /* Image layer - no border-radius needed, parent clips via overflow */
 .avatar-user-image {
   flex-shrink: 0;
   background-size: cover;
-  bottom: 0;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  inset: 0;
 }
 
 /* For img tag avatars - better caching and performance */
@@ -172,12 +160,9 @@ img.avatar-user-image {
 .avatar-border-team {
   border-radius: 8px;
   background: rgba(0, 0, 0, 0);
-  bottom: 0;
   flex-shrink: 0;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  inset: 0;
 }
 
 @media (prefers-color-scheme: dark) {

shared/common-adapters/button.css

@@ -21,10 +21,7 @@
 
 .button__underlay {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
+  inset: 0;
   border-radius: 4px;
   transition: background-color 0.2s ease-out;
 }
@@ -44,13 +41,7 @@
   background-color: rgba(112, 78, 186, 0.05);
 }
 .button__underlay_black:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-@media (prefers-color-scheme: dark) {
-  .button__underlay_black:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
+  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 }
 
 .button__underlay_yellow:hover {

shared/common-adapters/choice-list.css

@@ -1,19 +1,13 @@
 .cl-entry {
   background-color: transparent;
   &:hover {
-    background-color: var(--color-blueLighter2);
+    background-color: light-dark(var(--color-blueLighter2), #140d03);
     .cl-icon-container {
       background: transparent;
     }
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .cl-entry:hover {
-    background-color: #140d03;
-  }
-}
-
 
 .cl-icon {
   transform-origin: center center;

shared/common-adapters/icon.desktop.tsx

@@ -1,26 +1,24 @@
 import * as Shared from './icon.shared'
 import * as Styles from '@/styles'
-import {colors, darkColors} from '@/styles/colors'
 import * as React from 'react'
 import logger from '@/logger'
 import {iconMeta} from './icon.constants-gen'
-import invert from 'lodash/invert'
 import {getAssetPath} from '@/constants/platform.desktop'
 import type {Props, IconType} from './icon'
 import type {MeasureRef} from './measure-ref'
-import {useColorScheme} from 'react-native'
 
-const invertedLight = invert(colors)
-const invertedDark = invert(darkColors)
+// Extract color name from CSS variable string: "var(--color-black_50)" → "black_50"
+const cssVarToColorName = (cssVar: string): string | undefined => {
+  const match = /^var\(--color-(.+)\)$/.exec(cssVar)
+  return match?.[1]
+}
 
 const Icon = React.memo<Props>(
   React.forwardRef<MeasureRef, Props>(function Icon(props, ref) {
     const {type, inheritColor, opacity, fontSize, noContainer, onMouseEnter, onMouseLeave, style} = props
     const {className, hint, colorOverride, padding, boxStyle, allowLazy = true} = props
     const iconType = type
     const hasDarkVariant = !!iconMeta[iconType].nameDark
-    const scheme = useColorScheme()
-    const isDarkMode = scheme === 'dark' && hasDarkVariant
 
     if (!Shared.isValidIconType(iconType)) {
       logger.warn('Unknown icontype passed', iconType)
@@ -86,7 +84,7 @@ const Icon = React.memo<Props>(
         ...(props.color ? {color: color} : {}),
       } as React.CSSProperties
 
-      iconElement = (
+      const img = (
         <img
           loading={allowLazy ? 'lazy' : undefined}
           className={className}
@@ -95,9 +93,17 @@ const Icon = React.memo<Props>(
           title={hint}
           style={imgStyle}
           onClick={onClick || undefined}
-          srcSet={iconTypeToSrcSet(iconType, isDarkMode)}
+          srcSet={iconTypeToSrcSet(iconType, false)}
         />
       )
+      iconElement = hasDarkVariant ? (
+        <picture>
+          <source srcSet={iconTypeToSrcSet(iconType, true)} media="(prefers-color-scheme: dark)" />
+          {img}
+        </picture>
+      ) : (
+        img
+      )
     }
 
     if (hasContainer) {
@@ -112,10 +118,9 @@ const Icon = React.memo<Props>(
           hoverColor: 'inherit',
         }
       } else {
-        const invertedColors = isDarkMode ? invertedDark : invertedLight
-        const hoverColorName = onClick ? invertedColors[hoverColor] : null
+        const hoverColorName = onClick ? cssVarToColorName(hoverColor) : null
         hoverStyleName = hoverColorName ? `hover_color_${hoverColorName}` : ''
-        const colorName = invertedColors[color]
+        const colorName = cssVarToColorName(color)
         if (colorName) {
           colorStyleName = `color_${colorName}`
         }

shared/common-adapters/input2.desktop.tsx

@@ -21,41 +21,13 @@ export const Input2 = React.memo(
     const inputSingleRef = React.useRef<HTMLInputElement>(null)
     const inputMultiRef = React.useRef<HTMLTextAreaElement>(null)
 
-    const autoResizeLastRef = React.useRef('')
-    const autoResize = React.useCallback(() => {
-      if (!multiline) {
-        // no resizing height on single-line inputs
-        return
-      }
-
-      // Allow textarea to layout automatically
-      // if (this.props.growAndScroll) {
-      //   return
-      // }
-
-      const n = inputMultiRef.current
-      if (!n) {
-        return
-      }
-
-      // ignore if value hasn't changed
-      if (n.value === autoResizeLastRef.current) {
-        return
-      }
-      autoResizeLastRef.current = n.value
-
-      n.style.height = '1px'
-      n.style.height = `${n.scrollHeight}px`
-    }, [multiline])
-
     const onChange = React.useCallback(
       (e: {target: HTMLInputElement | HTMLTextAreaElement}) => {
         const s = e.target.value
         setValue(s)
         _onChangeText?.(s)
-        autoResize()
       },
-      [_onChangeText, autoResize]
+      [_onChangeText]
     )
     const onSelect = React.useCallback((e: {currentTarget: HTMLInputElement | HTMLTextAreaElement}) => {
       selectionRef.current = {
@@ -103,7 +75,6 @@ export const Input2 = React.memo(
                 }
               }
             }, 10)
-            autoResize()
             if (reflectChange) {
               setTimeout(() => {
                 if (!i) return
@@ -114,13 +85,13 @@ export const Input2 = React.memo(
         },
         value,
       }
-    }, [value, multiline, autoResize, onChange])
+    }, [value, multiline, onChange])
 
     const rows = multiline ? rowsMin || Math.min(2, rowsMax || 2) : 0
     const style = React.useMemo(() => {
       const textStyle = getTextStyle(textType, isDarkMode)
       if (multiline) {
-        const heightStyles: {minHeight: number; maxHeight?: number; overflowY?: 'hidden'} = {
+        const heightStyles: {minHeight: number; maxHeight?: number} = {
           minHeight:
             rows * (textStyle.lineHeight === undefined ? 20 : maybeParseInt(textStyle.lineHeight, 10) || 20) +
             (padding ? Styles.globalMargins[padding] * 2 : 0),
@@ -130,8 +101,6 @@ export const Input2 = React.memo(
           heightStyles.maxHeight =
             rowsMax *
             (textStyle.lineHeight === undefined ? 20 : maybeParseInt(textStyle.lineHeight, 10) || 20)
-        } else {
-          heightStyles.overflowY = 'hidden'
         }
 
         const paddingStyles = padding ? Styles.padding(Styles.globalMargins[padding]) : {}
@@ -219,13 +188,15 @@ const styles = Styles.styleSheetCreate(() => ({
   },
   growAndScroll: Styles.platformStyles({
     isElectron: {
+      fieldSizing: 'fixed',
       maxHeight: '100%',
-      overflowY: 'scroll',
+      overflowY: 'auto',
+      scrollbarGutter: 'stable',
     },
   }),
   multiline: Styles.platformStyles({
     isElectron: {
-      height: 'initial',
+      fieldSizing: 'content',
       paddingBottom: 0,
       paddingTop: 0,
       resize: 'none',

shared/common-adapters/list2.desktop.tsx

@@ -32,7 +32,8 @@ function List2<T>(props: Props<T>) {
         style={
           {
             height: '100%',
-            overflowY: 'scroll',
+            overflowY: 'auto',
+            scrollbarGutter: 'stable',
             width: '100%',
             ...Styles.castStyleDesktop(style),
           } as const
@@ -68,7 +69,8 @@ function List2<T>(props: Props<T>) {
           style={
             {
               height: '100%',
-              overflowY: 'scroll',
+              overflowY: 'auto',
+              scrollbarGutter: 'stable',
               width: '100%',
               ...Styles.castStyleDesktop(style),
             } as const
@@ -89,7 +91,8 @@ function List2<T>(props: Props<T>) {
           style={
             {
               height: '100%',
-              overflowY: 'scroll',
+              overflowY: 'auto',
+              scrollbarGutter: 'stable',
               width: '100%',
               ...Styles.castStyleDesktop(style),
             } as const