fix(ui): visual audit batch — light skeletons, sentinel copy, toast, tab focus

js/console/src/components/utils/Link.tsx

@@ -2,8 +2,16 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
 export const UnstyledLink = styled(Link)<{ $extendStyle?: object }>(
-  ({ $extendStyle }) => ({
+  ({ theme, $extendStyle }) => ({
     textDecoration: 'none',
+    color: 'inherit',
+    '&:focus, &:focus-visible': {
+      outline: 'none',
+      color: 'inherit',
+    },
+    '&:focus-visible': {
+      ...theme.partials.focus.default,
+    },
     ...$extendStyle,
   })
 )

js/console/src/components/utils/SkeletonLoaders.tsx

@@ -6,6 +6,7 @@ import {
   SidecarItem,
 } from '@pluralsh/design-system'
 import chroma from 'chroma-js'
+import { type CSSProperties as ReactCSSProperties } from 'react'
 import styled, {
   CSSObject,
   CSSProperties,
@@ -16,13 +17,13 @@ import { CSSPseudos } from 'styled-components/dist/types'
 
 const shimmerKeyframes = keyframes`
   0% {
-    stop-color: #2D3037;
+    stop-color: var(--skeleton-from);
   }
   50% {
-    stop-color: #393C44;
+    stop-color: var(--skeleton-to);
   }
   100% {
-    stop-color: #2D3037;
+    stop-color: var(--skeleton-from);
   }
 `
 const LinearGradient = styled.linearGradient`
@@ -31,6 +32,15 @@ const LinearGradient = styled.linearGradient`
   }
 `
 
+function skeletonCssVars(
+  theme: ReturnType<typeof useTheme>
+): ReactCSSProperties {
+  return {
+    '--skeleton-from': theme.colors['fill-two'],
+    '--skeleton-to': theme.colors['fill-three'],
+  }
+}
+
 // pretty much deprecated in favor of "loading" prop on tables
 export function TableSkeleton({
   width = 870,
@@ -70,6 +80,7 @@ export function TableSkeleton({
         viewBox={`0 0 ${width + theme.spacing.large * (numColumns - 1)} ${height}`}
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        style={skeletonCssVars(theme)}
       >
         {Array.from({ length: numRows * numColumns }, (_, i) => (
           <rect
@@ -95,11 +106,11 @@ export function TableSkeleton({
             >
               <stop
                 offset="0%"
-                stopColor="#2D3037"
+                stopColor={theme.colors['fill-two']}
               />
               <stop
                 offset="100%"
-                stopColor="#393C44"
+                stopColor={theme.colors['fill-three']}
               />
             </LinearGradient>
           ))}
@@ -110,12 +121,15 @@ export function TableSkeleton({
 }
 
 export function ChartSkeleton({ scale = 1 }: { scale?: number }) {
+  const theme = useTheme()
+
   return (
     <svg
       width={`${276 * scale}`}
       height={`${276 * scale}`}
       viewBox="0 0 276 276"
       xmlns="http://www.w3.org/2000/svg"
+      style={skeletonCssVars(theme)}
     >
       <path
         d="M0 138C0 61.7847 61.7848 0 138 0C214.215 0 276 61.7847 276 138C276 214.215 214.215 276 138 276C61.7847 276 0 214.215 0 138ZM253.202 138C253.202 74.3755 201.625 22.7976 138 22.7976C74.3755 22.7976 22.7976 74.3755 22.7976 138C22.7976 201.625 74.3755 253.202 138 253.202C201.625 253.202 253.202 201.625 253.202 138Z"
@@ -139,11 +153,11 @@ export function ChartSkeleton({ scale = 1 }: { scale?: number }) {
         >
           <stop
             offset="0%"
-            stopColor="#2D3037"
+            stopColor={theme.colors['fill-two']}
           />
           <stop
             offset="100%"
-            stopColor="#393C44"
+            stopColor={theme.colors['fill-three']}
           />
         </LinearGradient>
         <LinearGradient
@@ -155,11 +169,11 @@ export function ChartSkeleton({ scale = 1 }: { scale?: number }) {
         >
           <stop
             offset="0%"
-            stopColor="#2D3037"
+            stopColor={theme.colors['fill-two']}
           />
           <stop
             offset="100%"
-            stopColor="#393C44"
+            stopColor={theme.colors['fill-three']}
           />
         </LinearGradient>
       </defs>

js/console/src/components/utils/Tabs.tsx

@@ -45,5 +45,13 @@ export const LinkTabWrap = styled(LinkTabWrapUnstyled)<{
 }>(({ theme, vertical, subTab, $extendStyle }) => ({
   ...(vertical ? { width: '100%' } : {}),
   ...(subTab ? { borderRadius: theme.borderRadiuses.medium } : {}),
+  color: 'inherit',
+  '&:focus, &:focus-visible': {
+    outline: 'none',
+    color: 'inherit',
+  },
+  '&:focus-visible': {
+    ...theme.partials.focus.default,
+  },
   ...$extendStyle,
 }))

js/console/src/index.css

@@ -37,7 +37,8 @@ code {
     source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-/*  Undo mysterious global :focus-visible styles set by (probably) honorable */
+/*  Undo mysterious global :focus / :focus-visible styles set by (probably) honorable */
+html :focus,
 html :focus-visible {
   background-color: unset;
   color: unset;

js/design-system/src/components/Banner.tsx

@@ -61,7 +61,7 @@ const BannerOuter: any = styled.div<{
   $fullWidth?: boolean
 }>(({ $borderColorKey, $fullWidth, theme }) => ({
   display: 'inline-flex',
-  align: 'flex-start',
+  alignItems: 'flex-start',
   padding: theme.spacing.medium,
   backgroundColor:
     theme.mode === 'light'
@@ -81,10 +81,22 @@ const BannerInner = styled.div(({ theme }) => ({
   alignItems: 'flex-start',
 }))
 
-const IconWrap = styled.div((_) => ({
+const BANNER_ICON_SIZE = 20
+
+const IconWrap = styled.div(({ theme }) => ({
   display: 'flex',
-  paddingTop: 2,
-  paddingBottom: 2,
+  flexShrink: 0,
+  width: BANNER_ICON_SIZE,
+  height: BANNER_ICON_SIZE,
+  alignItems: 'flex-start',
+  justifyContent: 'center',
+  paddingTop: 4,
+  boxSizing: 'content-box',
+  marginRight: theme.spacing.medium,
+  '& svg': {
+    width: BANNER_ICON_SIZE,
+    height: BANNER_ICON_SIZE,
+  },
 }))
 
 const Heading = styled.div<{ $bold: boolean }>(({ $bold, theme }) => ({
@@ -103,7 +115,7 @@ const BannerAction = styled(Span)(({ theme }) => ({
 
 const Content = styled.p<{ $hasHeading: boolean }>(
   ({ $hasHeading: $heading, theme }) => ({
-    ...theme.partials.text.body2LooseLineHeight,
+    ...theme.partials.text.body2,
     marginTop: $heading ? theme.spacing.xxsmall : theme.spacing.xxxsmall,
     marginBottom: 0,
     color: theme.colors['text-light'],
@@ -141,14 +153,14 @@ function Banner({
       $borderColorKey={borderColorKey}
       $fullWidth={fullWidth}
       as={Flex}
+      align="flex-start"
       {...props}
     >
       <BannerInner>
         <IconWrap>
           <BannerIcon
-            size={20}
+            size={BANNER_ICON_SIZE}
             color={iconColorKey}
-            marginRight="medium"
           />
         </IconWrap>
         <div>

js/design-system/src/components/Tab.tsx

@@ -38,6 +38,7 @@ function Tab({
       body2
       display="block"
       textDecoration="none"
+      color="inherit"
       tabIndex={0}
       userSelect="none"
       cursor="pointer"
@@ -58,9 +59,14 @@ function Tab({
           : undefined
       }
       {...borderRadiuses}
+      _focus={{
+        outline: 'none',
+        color: 'inherit',
+      }}
       _focusVisible={{
         zIndex: theme.zIndexes.base + 1,
         ...theme.partials.focus.default,
+        color: 'inherit',
       }}
       {...props}
     >

js/design-system/src/components/TabList.tsx

@@ -177,6 +177,7 @@ const TabClone = styled(
   position: 'relative',
   '&:focus, &:focus-visible': {
     outline: 'none',
+    color: 'inherit',
     zIndex: theme.zIndexes.base + 1,
   },
   '&:focus-visible': {
@@ -219,9 +220,15 @@ function TabRenderer({ item, state, stateProps, stateRef }: TabRendererProps) {
       {
         ...{
           cursor: 'pointer',
-          _focusVisible: { ...theme.partials.focus.default },
+          _focus: { outline: 'none', color: 'inherit' },
+          _focusVisible: {
+            ...theme.partials.focus.default,
+            color: 'inherit',
+          },
           position: 'relative',
           '&:focus, &:focus-visible': {
+            outline: 'none',
+            color: 'inherit',
             zIndex: theme.zIndexes.base + 1,
           },
         },

js/design-system/src/components/icons/ErrorIcon.tsx

@@ -1,24 +1,30 @@
 import createIcon from './createIcon'
 
+// Match CheckRoundedIcon optical size (14px glyph in 16 viewBox).
+const OPTICAL_INSET_SCALE = 14 / 16
+
 export default createIcon(({ size, color, secondaryColor = 'transparent' }) => (
   <svg
     width={size}
+    height={size}
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect
-      x="1"
-      y="1"
-      width="14"
-      height="14"
-      rx={2.5}
-      ry={2.5}
-      fill={secondaryColor}
-    />
-    <path
-      d="m3 0c-1.6619983 0-3 1.3380017-3 3v10c0 1.661998 1.3380017 3 3 3h10c1.661998 0 3-1.338002 3-3v-10c0-1.6619983-1.338002-3-3-3zm4.328125 3.8320313h1.3125v5.9199216h-1.3125zm.65625 7.4941407a.918033.918033 0 0 1 .9179688.917969.918033.918033 0 0 1 -.9179688.917969.918033.918033 0 0 1 -.9179687-.917969.918033.918033 0 0 1 .9179687-.917969z"
-      fill={color}
-    />
+    <g transform={`translate(8 8) scale(${OPTICAL_INSET_SCALE}) translate(-8 -8)`}>
+      <rect
+        x="1"
+        y="1"
+        width="14"
+        height="14"
+        rx={2.5}
+        ry={2.5}
+        fill={secondaryColor}
+      />
+      <path
+        d="m3 0c-1.6619983 0-3 1.3380017-3 3v10c0 1.661998 1.3380017 3 3 3h10c1.661998 0 3-1.338002 3-3v-10c0-1.6619983-1.338002-3-3-3zm4.328125 3.8320313h1.3125v5.9199216h-1.3125zm.65625 7.4941407a.918033.918033 0 0 1 .9179688.917969.918033.918033 0 0 1 -.9179688.917969.918033.918033 0 0 1 -.9179687-.917969.918033.918033 0 0 1 .9179687-.917969z"
+        fill={color}
+      />
+    </g>
   </svg>
 ))

js/design-system/src/components/icons/InfoIcon.tsx

@@ -1,23 +1,29 @@
 import createIcon from './createIcon'
 
+// Match CheckRoundedIcon optical size (14px glyph in 16 viewBox).
+const OPTICAL_INSET_SCALE = 14 / 16
+
 export default createIcon(({ size, color, secondaryColor = 'transparent' }) => (
   <svg
     width={size}
+    height={size}
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <circle
-      cx="8"
-      cy="8"
-      r="7"
-      fill={secondaryColor}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      fill={color}
-      d="m7.999995 16.000011c4.40001 0 8.00001-3.6 8.00001-8.0000204 0-4.4-3.6-8.00000085-8.00001-8.00000115-4.4-.0000004-8 3.60000115-8 8.00000115-.000001 4.4000204 3.6 8.0000204 8 8.0000204zm-.8-3.2h1.3v-6.3000204h-1.3zm1.6-8.9000204c0-.5-.4-.9-.9-.9s-.9.5-.9 1 .4.9.9.9.9-.5.9-1z"
-    />
+    <g transform={`translate(8 8) scale(${OPTICAL_INSET_SCALE}) translate(-8 -8)`}>
+      <circle
+        cx="8"
+        cy="8"
+        r="7"
+        fill={secondaryColor}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill={color}
+        d="m7.999995 16.000011c4.40001 0 8.00001-3.6 8.00001-8.0000204 0-4.4-3.6-8.00000085-8.00001-8.00000115-4.4-.0000004-8 3.60000115-8 8.00000115-.000001 4.4000204 3.6 8.0000204 8 8.0000204zm-.8-3.2h1.3v-6.3000204h-1.3zm1.6-8.9000204c0-.5-.4-.9-.9-.9s-.9.5-.9 1 .4.9.9.9.9-.5.9-1z"
+      />
+    </g>
   </svg>
 ))

js/design-system/src/components/icons/WarningIcon.tsx

@@ -8,6 +8,7 @@ export default createIcon(({ size, color, secondaryColor = 'transparent' }) => {
   return (
     <svg
       width={size}
+      height={size}
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"