CORE-1997: Remove styled-components from theme files

- Remove styled-components imports from src/theme.ts
- Remove styled-components imports from src/theme/buttons.ts
- Convert css helper usages to plain template strings
- Remove the desktop() helper function from breakpoints
- Update components to use breakpoints.desktopBreak directly in media queries
- Remove unused css imports from NavBar.tsx and NavBarLogo.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: OpenStaxClaude

src/components/NavBar.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import * as Constants from '../../src/constants';
 import theme from '../../src/theme';
 import { BodyPortal } from './BodyPortal';
@@ -11,9 +11,9 @@ const BarWrapper = styled(BodyPortal)`
   position: relative;
   padding: 0 ${theme.padding.navbar.mobile}rem;
   box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
-  ${theme.breakpoints.desktop(css`
+  @media screen and (min-width: ${theme.breakpoints.desktopBreak}em) {
     padding: 0 ${theme.padding.navbar.mobile}rem;
-  `)}
+  }
   min-width: 0;
 `;
 
@@ -30,9 +30,9 @@ const StyledNavBar = styled.div<{
   height: ${props => props.navMobileHeight}rem;
   ${props => props.maxWidth ? `max-width: ${props.maxWidth}rem;` : null}
   margin: 0 auto;
-  ${props => theme.breakpoints.desktop(css`
-    height: ${props.navDesktopHeight}rem;
-  `)}
+  @media screen and (min-width: ${theme.breakpoints.desktopBreak}em) {
+    height: ${props => props.navDesktopHeight}rem;
+  }
   @media print { display: none; }
 `;
 

src/components/NavBarLogo.tsx

@@ -1,15 +1,15 @@
 import theme from "../../src/theme";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { navLogoDesktopHeight, navLogoMobileHeight } from "../../src/constants";
 
 
 const StyledLogo = styled.svg`
   display: block;
   width: auto;
   height: ${navLogoMobileHeight}rem;
-  ${theme.breakpoints.desktop(css`
+  @media screen and (min-width: ${theme.breakpoints.desktopBreak}em) {
     height: ${navLogoDesktopHeight}rem;
-  `)}
+  }
 `;
 
 export const NavBarLogo = ({ alt }: { alt: string; }) => (

src/theme.ts

@@ -1,4 +1,3 @@
-import { css, FlattenSimpleInterpolation } from "styled-components";
 import { palette } from "./theme/palette";
 
 export const colors = {
@@ -26,7 +25,7 @@ export const padding = {
   },
 };
 
-export const defaultFocusOutline = css`
+export const defaultFocusOutline = `
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
 `;
@@ -38,11 +37,6 @@ export const breakpoints = {
   mobileNavBreak,
   mobileBreak,
   desktopBreak,
-  desktop: (style: FlattenSimpleInterpolation) => css`
-    @media screen and (min-width: ${desktopBreak}em) {
-      ${style}
-    }
-  `,
 };
 
 const theme = {

src/theme/buttons.ts

@@ -1,4 +1,3 @@
-import { css } from "styled-components";
 import { palette } from "./palette";
 
 export type ButtonVariant = keyof typeof buttonStyleSets;
@@ -46,7 +45,7 @@ const buttonStyleSets = asButtonStyleSetTypes({
 
 export const applyButtonVariantStyles = (variant: ButtonVariant) => {
   const set = buttonStyleSets[variant];
-  return css`
+  return `
     background-color: ${set.background};
     color: ${set.color};
     font-weight: ${set.fontWeight ?? 700};