feat(buttons): update buttons to match facelift designs

sanity-io · Sep 28, 2023 · 9f4abe1 · 9f4abe1
1 parent 2a47679
commit 9f4abe1
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 28 deletions.
diff --git a/src/primitives/button/button.tsx b/src/primitives/button/button.tsx
@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify, ButtonTextStyle} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -30,6 +30,10 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   selected?: boolean
   space?: number | number[]
   textAlign?: ButtonTextAlign
+  /**
+   * @default primary
+   */
+  textStyle?: ButtonTextStyle
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
@@ -84,6 +88,7 @@ export const Button = forwardRef(function Button(
     textAlign,
     tone = 'default',
     type = 'button',
+    textStyle = 'primary',
     ...restProps
   } = props
 
@@ -137,7 +142,7 @@ export const Button = forwardRef(function Button(
         <Box as="span" {...boxProps}>
           <Flex as="span" justify={justify}>
             {icon && (
-              <Text size={fontSize}>
+              <Text size={fontSize} muted={textStyle === 'secondary'}>
                 {isValidElement(icon) && icon}
                 {isValidElementType(icon) && createElement(icon)}
               </Text>
@@ -150,6 +155,7 @@ export const Button = forwardRef(function Button(
                 marginRight={iconRight ? space : undefined}
               >
                 <Text
+                  muted={textStyle === 'secondary'}
                   align={textAlign}
                   size={fontSize}
                   textOverflow="ellipsis"
@@ -161,7 +167,7 @@ export const Button = forwardRef(function Button(
             )}
 
             {iconRight && (
-              <Text size={fontSize}>
+              <Text size={fontSize} muted={textStyle === 'secondary'}>
                 {isValidElement(iconRight) && iconRight}
                 {isValidElementType(iconRight) && createElement(iconRight)}
               </Text>

diff --git a/src/theme/studioTheme/color.ts b/src/theme/studioTheme/color.ts
@@ -101,7 +101,7 @@ export const color = createColorTheme({
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
         border: bg,
-        fg: mix(base.bg, dark ? black.hex : white.hex),
+        fg: getColor(tints, dark, 'default', 'bg_base'),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex),
         },
@@ -259,19 +259,19 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 950 : 50].hex),
-        fg: mix(bg, tints[dark ? 800 : 200].hex),
+        fg: getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         link: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         code: {
           bg,
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: rgba(skeletonFrom, 0.5),
@@ -288,9 +288,12 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg:
+          tone !== 'default' && tone !== 'primary'
+            ? getColor(tints, dark, tone, 'text_secondary')
+            : getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -300,7 +303,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -321,9 +324,12 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, getColor(tints, dark, name, 'bg_base_active')),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg:
+          tone !== 'default' && tone !== 'primary'
+            ? getColor(tints, dark, tone, 'text_secondary')
+            : getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -333,7 +339,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -354,9 +360,12 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg:
+          tone !== 'default' && tone !== 'primary'
+            ? getColor(tints, dark, tone, 'text_secondary')
+            : getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -366,7 +375,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -382,9 +391,12 @@ export const color = createColorTheme({
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
       border: mix(bg, getColor(tints, dark, name, 'bg_base')),
-      fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+      fg:
+        tone !== 'default' && tone !== 'primary'
+          ? getColor(tints, dark, tone, 'text_secondary')
+          : getColor(tints, dark, tone, 'text_primary'),
       muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+        fg: getColor(tints, dark, tone, 'text_secondary'),
       },
       accent: {
         fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -394,7 +406,7 @@ export const color = createColorTheme({
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+        fg: getColor(tints, dark, tone, 'text_secondary'),
       },
       skeleton: {
         from: skeletonFrom,

diff --git a/src/types/button.ts b/src/types/button.ts
@@ -12,3 +12,5 @@ export type ButtonTextAlign = 'left' | 'right' | 'center'
  * @public
  */
 export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+
+export type ButtonTextStyle = 'primary' | 'secondary'
diff --git a/stories/helpers/matrixBuilder.tsx b/stories/helpers/matrixBuilder.tsx
@@ -5,6 +5,7 @@ interface MatrixBuilderProps<Rows extends string[], Cols extends string[]> {
   columns: Cols
   rows: Rows
   title: string
+  subHeader?: React.ReactNode
   renderItem: ({row, column}: {row: Rows[number]; column: Cols[number]}) => React.ReactNode
 }
 
@@ -49,7 +50,7 @@ const Row = ({row, children}: RowProps) => {
 
 type TableProps<Rows extends string[], Cols extends string[]> = Pick<
   MatrixBuilderProps<Rows, Cols>,
-  'scheme' | 'columns' | 'rows' | 'title'
+  'scheme' | 'columns' | 'rows' | 'title' | 'subHeader'
 > & {
   children: React.ReactNode
 }
@@ -60,12 +61,21 @@ const Table = <Rows extends string[], Cols extends string[]>({
   columns,
   rows,
   title,
+  subHeader,
 }: TableProps<Rows, Cols>) => {
   return (
     <Card scheme={scheme} padding={4} border radius={2}>
-      <Grid columns={columns.length + 1} rows={rows.length + 1} gap={2}>
+      <Grid
+        gapX={3}
+        gapY={2}
+        style={{
+          gridTemplateColumns: `repeat(${columns.length + 1}, auto)`,
+          gridTemplateRows: `repeat(${rows.length + 1}, auto)`,
+        }}
+      >
         {/* First row, columns titles */}
         <FirstRow title={title} columns={columns} />
+        {subHeader}
         {/* Rows titles and items */}
         {children}
       </Grid>
@@ -83,9 +93,10 @@ export function matrixBuilder<Rows extends string[], Cols extends string[]>({
   rows,
   title,
   renderItem,
+  subHeader,
 }: MatrixBuilderProps<Rows, Cols>): JSX.Element {
   return (
-    <Table scheme={scheme} columns={columns} rows={rows} title={title}>
+    <Table scheme={scheme} columns={columns} rows={rows} title={title} subHeader={subHeader}>
       {rows.map((row) => (
         <Row row={row} key={row}>
           {columns.map((column) => renderItem({row, column}))}