refactor(theme): move linkColor to palette

components/link/link.tsx

@@ -28,7 +28,7 @@ const Link = React.memo(React.forwardRef<HTMLAnchorElement, React.PropsWithChild
   href, color, underline, pure, children, className, block, ...props
 }, ref: React.Ref<HTMLAnchorElement>) => {
   const theme = useTheme()
-  const linkColor = color || block ? theme.palette.success : 'inherit'
+  const linkColor = color || block ? theme.palette.link : 'inherit'
   const padding = block ? theme.layout.gapQuarter : '0'
   const decoration = underline ? 'underline' : 'none'
 

components/styles/css-baseline/css-baseline.tsx

@@ -80,7 +80,7 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
           -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
           -webkit-box-align: center;
           align-items: center;
-          color: ${theme.expressiveness.linkColor};
+          color: ${theme.palette.link};
           text-decoration: ${theme.expressiveness.linkStyle};
         }
         

components/styles/themes/dark.ts

@@ -36,14 +36,13 @@ export const palette: ZeitUIThemesPalette = {
   purple: '#f81ce5',
   alert: '#ff0080',
   violet: '#7928ca',
+  link: '#fff',
 }
 
 export const expressiveness: ZeitUIThemesExpressiveness = {
-  linkColor: '#fff',
   linkStyle: 'none',
   linkHoverStyle: 'none',
   dropdownBoxShadow: '0 0 0 1px #333',
-  dropdownTriangleStroke: '#fff',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
   shadowSmall: '0 0 0 1px #333',
@@ -62,7 +61,7 @@ export const layout: ZeitUIThemesLayout = {
   pageMargin: '16pt',
   pageWidth: '750pt',
   pageWidthWithMargin: '782pt',
-  breakpointMobile: '600px',
+  breakpointMobile: '720px',
   breakpointTablet: '960px',
   radius: '5px',
 }

components/styles/themes/default.ts

@@ -36,14 +36,13 @@ export const palette: ZeitUIThemesPalette = {
   purple: '#f81ce5',
   alert: '#ff0080',
   violet: '#7928ca',
+  link: '#0070f3',
 }
 
 export const expressiveness: ZeitUIThemesExpressiveness = {
-  linkColor: '#0070f3',
   linkStyle: 'none',
   linkHoverStyle: 'none',
   dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
-  dropdownTriangleStroke: '#fff',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
   shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
@@ -62,7 +61,7 @@ export const layout: ZeitUIThemesLayout = {
   pageMargin: '16pt',
   pageWidth: '750pt',
   pageWidthWithMargin: '782pt',
-  breakpointMobile: '600px',
+  breakpointMobile: '720px',
   breakpointTablet: '960px',
   radius: '5px',
 }

components/styles/themes/index.ts

@@ -30,14 +30,13 @@ export interface ZeitUIThemesPalette {
   purple: string
   alert: string
   violet: string
+  link: string
 }
 
 export interface ZeitUIThemesExpressiveness {
-  linkColor: string
   linkStyle: string
   linkHoverStyle: string
   dropdownBoxShadow: string
-  dropdownTriangleStroke: string
   scrollerStart: string
   scrollerEnd: string
   shadowSmall: string