feat: add surface colors

.eslintrc.js

@@ -13,7 +13,8 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/jsx-runtime",
-    "prettier", // "prettier" needs to be last!
+    "plugin:storybook/recommended",
+    "prettier",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: { project: "./tsconfig.json" },

.storybook/Storybook.tsx

@@ -1,4 +1,7 @@
 import { getStorybookUI } from "@storybook/react-native"
 import "./storybook.requires"
+import { clearDecorators } from "@storybook/react-native"
+
+clearDecorators()
 
 export const StorybookUIRoot = getStorybookUI({})

.storybook/preview.js

@@ -1,4 +1,4 @@
-import { withDarkModeSwitcher } from "./decorators"
+import { withDarkModeSwitcher } from "../src/storybook/decorators"
 
 export const decorators = [withDarkModeSwitcher]
 export const parameters = {}

.storybook/storybook.requires.js

@@ -22,9 +22,11 @@ const getStories = () => {
     require("../lib/atoms/BackButton/BackButton.stories.tsx"),
     require("../lib/atoms/Box/Box.stories.tsx"),
     require("../lib/atoms/Spacer/Spacer.stories.tsx"),
+    require("../lib/colors.stories.tsx"),
     require("../lib/elements/Avatar/Avatar.stories.tsx"),
     require("../lib/elements/Checkbox/Checkbox.stories.tsx"),
     require("../lib/elements/Input/Input.stories.tsx"),
+    require("../lib/elements/Separator/Separator.stories.tsx"),
     require("../lib/elements/Touchable/Touchable.stories.tsx"),
     require("../lib/molecules/MenuItem.stories.tsx"),
     require("../lib/svgs/icons.stories.tsx"),

ios/Podfile.lock

@@ -360,11 +360,11 @@ PODS:
     - React-jsi (= 0.69.5)
     - React-logger (= 0.69.5)
     - React-perflogger (= 0.69.5)
-  - RNCAsyncStorage (1.17.10):
+  - RNCAsyncStorage (1.17.11):
     - React-Core
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
-  - RNReanimated (2.12.0):
+  - RNReanimated (2.13.0):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -391,7 +391,7 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSVG (13.4.0):
+  - RNSVG (13.6.0):
     - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
@@ -609,10 +609,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: 42b34fde72e42446d9b08d2b9a3ddc2fa9ac6189
   React-runtimeexecutor: c778439c3c430a5719d027d3c67423b390a221fe
   ReactCommon: ab1003b81be740fecd82509c370a45b1a7dda0c1
-  RNCAsyncStorage: 0c357f3156fcb16c8589ede67cc036330b6698ca
+  RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
-  RNReanimated: c3e58924b9418883b0bde9e78c4c957302f02435
-  RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
+  RNReanimated: f0d66bda3d074c43c72a18f4fd4f4c26687bc1fd
+  RNSVG: 3a79c0c4992213e4f06c08e62730c5e7b9e4dc17
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: c2b1f2494060865ac1f27e49639e72371b1205fa
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

lib/colors.stories.tsx

@@ -0,0 +1,153 @@
+import { List, Row } from "./storybookHelpers"
+import { Flex } from "./atoms"
+import { useColor } from "./hooks"
+import { Text } from "./elements/Text"
+import {
+  ColorCssString,
+  ColorNamedLayer,
+  ColorStrict,
+  ColorUsageLayer,
+  isUsageLayerName,
+  NAMED_LAYER_NAMES,
+} from "./tokens"
+
+export default {
+  title: "Tokens/colors",
+}
+
+const ColorSquare = ({ color: theColor, border }: { color: ColorStrict; border?: boolean }) => {
+  const color = useColor()
+
+  const contrast =
+    theColor.startsWith("on") &&
+    (theColor.endsWith("High") || theColor.endsWith("Medium") || theColor.endsWith("Low"))
+      ? theColor.match(/(High|Medium|Low)$/)?.[0]
+      : undefined
+
+  const colorWithoutContrast = theColor.replace(/(High|Medium|Low)$/, "")
+
+  const cssName = useCssColorName(theColor)
+  const namedName = useNamedColorName(theColor as any)
+  const displayName = isUsageLayerName(theColor) ? namedName : cssName
+
+  return (
+    <Flex>
+      <Flex
+        style={[
+          {
+            backgroundColor: color(theColor),
+            width: 80,
+            height: 80,
+            alignItems: "center",
+            justifyContent: "center",
+          },
+          border && {
+            borderWidth: 0.5,
+            borderColor: "grey",
+          },
+        ]}
+      />
+      <Text>{colorWithoutContrast}</Text>
+      {contrast && <Text>{contrast}</Text>}
+      <Text color="onBackgroundLow">{displayName}</Text>
+    </Flex>
+  )
+}
+
+export const Styled = () => (
+  <List>
+    <Row>
+      <ColorSquare color="black100" border />
+      <ColorSquare color="black60" />
+      <ColorSquare color="black30" />
+    </Row>
+    <Row>
+      <ColorSquare color="black15" />
+      <ColorSquare color="black10" />
+      <ColorSquare color="black5" />
+      <ColorSquare color="white100" border />
+    </Row>
+    <Row>
+      <ColorSquare color="blue150" />
+      <ColorSquare color="blue100" />
+      <ColorSquare color="blue10" />
+    </Row>
+    <Row>
+      <ColorSquare color="green150" />
+      <ColorSquare color="green100" />
+      <ColorSquare color="green10" />
+    </Row>
+    <Row>
+      <ColorSquare color="yellow150" />
+      <ColorSquare color="yellow100" />
+      <ColorSquare color="yellow10" />
+    </Row>
+    <Row>
+      <ColorSquare color="orange150" />
+      <ColorSquare color="orange100" />
+      <ColorSquare color="orange10" />
+    </Row>
+    <Row>
+      <ColorSquare color="red150" />
+      <ColorSquare color="red100" />
+      <ColorSquare color="red10" />
+    </Row>
+    <Row>
+      <ColorSquare color="brand" />
+      <ColorSquare color="devpurple" />
+    </Row>
+    <Row>
+      <ColorSquare color="background" border />
+    </Row>
+    <Row>
+      <ColorSquare color="onBackgroundHigh" border />
+      <ColorSquare color="onBackgroundMedium" />
+      <ColorSquare color="onBackgroundLow" />
+    </Row>
+    <Row>
+      <ColorSquare color="surface" border />
+    </Row>
+    <Row>
+      <ColorSquare color="onSurfaceHigh" border />
+      <ColorSquare color="onSurfaceMedium" />
+      <ColorSquare color="onSurfaceLow" />
+    </Row>
+    <Row>
+      <ColorSquare color="primary" border />
+    </Row>
+    <Row>
+      <ColorSquare color="onPrimaryHigh" border />
+      <ColorSquare color="onPrimaryMedium" />
+      <ColorSquare color="onPrimaryLow" />
+    </Row>
+    <Row>
+      <ColorSquare color="secondary" />
+    </Row>
+    <Row>
+      <ColorSquare color="onSecondaryHigh" />
+      <ColorSquare color="onSecondaryMedium" />
+      <ColorSquare color="onSecondaryLow" />
+    </Row>
+    <Row>
+      <ColorSquare color="brand" />
+    </Row>
+    <Row>
+      <ColorSquare color="onBrand" border />
+    </Row>
+  </List>
+)
+
+const useNamedColorName = (theColor: ColorUsageLayer): ColorNamedLayer => {
+  const color = useColor()
+  const cssName = useCssColorName(theColor)
+
+  const namedColor = NAMED_LAYER_NAMES.find((name) => color(name) === color(theColor))
+
+  if (namedColor === undefined) return cssName as ColorNamedLayer
+  return namedColor
+}
+
+const useCssColorName = (theColor: ColorStrict): ColorCssString => {
+  const color = useColor()
+  return color(theColor)
+}

lib/elements/Input/Input.stories.tsx

@@ -12,6 +12,7 @@ export const Styled = () => (
   <List style={{ marginLeft: 50 }} contentContainerStyle={{ alignItems: "flex-start" }}>
     <Flex width={300} height={120}>
       <Input />
+      <Input placeholder="wow" />
       <Input
         style={{ borderWidth: 0 }}
         icon={<MagnifyingGlassIcon />}

lib/elements/Input/Input.tsx

@@ -372,28 +372,28 @@ export const Input = forwardRef<TextInput, InputProps>(
   }
 )
 
-export interface InputStatus {
+export const computeBorderColor = ({
+  disabled,
+  error,
+  focused,
+}: {
   disabled?: boolean
   error?: boolean
   focused?: boolean
-}
+}): Color => {
+  switch (true) {
+    case error:
+      return "red100"
 
-/**
- * func to compute border color
- */
-export const computeBorderColor = (inputStatus: InputStatus): Color => {
-  const { disabled, error, focused } = inputStatus
+    case disabled:
+      return "onBackgroundLow"
 
-  if (disabled) {
-    return "black30"
-  }
-  if (error) {
-    return "red100"
-  }
-  if (focused) {
-    return "black60"
+    case focused:
+      return "onBackgroundMedium"
+
+    default:
+      return "onBackgroundLow"
   }
-  return "black30"
 }
 
 const StyledInput = styled(TextInput)`

lib/elements/Radio/RadioButton.tsx

@@ -4,6 +4,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   TouchableWithoutFeedbackProps,
+  View,
 } from "react-native"
 import styled from "styled-components/native"
 import { CssTransition } from "../../animation"
@@ -149,21 +150,18 @@ interface RadioDotProps {
 // This component represents the white ● mark in CSS. We are not using styled-system since it's easier to specify raw CSS
 // properties with styled-component.
 // Height, Width, and Border Radius calculations are used to maintain the size of the white dot when scaling
-export const RadioDot = styled.View.attrs<RadioDotProps>({})`
-  height: ${({
-    // @ts-expect-error
-    size,
-  }) => size * 0.625};
-  width: ${({
-    // @ts-expect-error
-    size,
-  }) => size * 0.625};
-  border-radius: ${({
-    // @ts-expect-error
-    size,
-  }) => `${size * 0.3125}px`};
-  background-color: white;
-`
+export const RadioDot = ({ size }: RadioDotProps) => {
+  return (
+    <View
+      style={{
+        height: size * 0.625,
+        width: size * 0.625,
+        borderRadius: size * 0.3125,
+        backgroundColor: "white",
+      }}
+    />
+  )
+}
 
 export const DisabledDot = styled(RadioDot)`
   border-bottom-color: ${themeGet("colors.black30")};

lib/elements/Separator/Separator.stories.tsx

@@ -0,0 +1,15 @@
+import { Spacer } from "../../atoms"
+import { Separator } from "./Separator"
+
+export default {
+  title: "Separator",
+  component: Separator,
+}
+
+export const Styled = () => (
+  <>
+    <Separator />
+    <Spacer y="2" />
+    <Separator borderColor="red" />
+  </>
+)

lib/elements/Separator/Separator.tsx

@@ -8,14 +8,13 @@ export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps {}
  * A horizontal divider whose width and spacing can be adjusted
  */
 export const Separator = styled.View<SeparatorProps>`
-  border: 1px solid ${themeGet("colors.black10")};
+  border: 1px solid ${themeGet("colors.onBackgroundLow")};
   border-bottom-width: 0;
   ${space};
   ${width};
   ${border};
 `
 
-// @ts-expect-error
 Separator.defaultProps = {
   width: "100%",
 }