GeekyAnts / GeekyAnts/NativeBase

Support `DEFAULT` key for color palette like in tailwind

Open
#5,630 0 comments 0 reactions 0 assignees View on GitHub
feature request triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

In tailwind you can do it like this:
```
module.exports = {
theme: {
colors: {
'primary': {
400: '#22d3ee',
DEFAULT: '#06b6d4',
600: '#0891b2'
},
},
},
}
```
Then when you use `primary` for color the `DEFAULT` value will be used, you won't need to specify the suffix.

It would be great if native-base can support this in the color palette.

Thank you.

### Problem Statement

In my project there are many places that use the same color, for example `primary.400`, it has become the default primary color for my project.
If the `DEFAULT` key is supported it would reduce the `.400` part at many places, and would speed up the development time in the future if I only need to type `primary`

### Proposed Solution or API

If native-base would support this, it would look like this:
```typescript
extendTheme({
colors: {
primary: {
// ...other colors
DEFAULT: '#06b6d4'
}
}
})
```

Usage:
```jsx
Hello
```

You can add some code in the `getColor` function to check for the DEFAULT value like this:
```typescript
// For example, the color value 'primary' is in 'theme.colors.primary' so this would be true
if (colorValue in theme.colors) {
return theme.colors[colorValue].DEFAULT
}
```

### Alternatives

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.