Skip to content

Commit

Permalink
feat(Tabs): add new color prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Feb 19, 2024
1 parent ef540cd commit 7534198
Show file tree
Hide file tree
Showing 6 changed files with 480 additions and 72 deletions.
258 changes: 223 additions & 35 deletions src/plugins/components/tabs/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,23 +38,6 @@ export default plugin(({ addComponents, theme }) => {
//Transition
[`@apply transition-${config.item.transition.property} duration-${config.item.transition.duration}`]:
{},
//Item:inactive
'&:not(.nui-active)': {
//Base
'@apply border-transparent': {},
//Color
[`@apply text-${config.item.font.color.inactive.light} dark:text-${config.item.font.color.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Border
[`@apply border-${config.item.border.active.light} dark:border-${config.item.border.active.dark}`]:
{},
//Color
[`@apply text-${config.item.font.color.active.light} dark:text-${config.item.font.color.active.dark}`]:
{},
},
//Item:icon
'&.nui-has-icon': {
'@apply flex items-center gap-1': {},
Expand All @@ -68,24 +51,6 @@ export default plugin(({ addComponents, theme }) => {
//Transition
[`@apply transition-${config.pill.transition.property} duration-${config.pill.transition.duration}`]:
{},
//Item:inactive
'&:not(.nui-active)': {
//color
[`@apply text-${config.pill.font.color.inactive.light} dark:text-${config.pill.font.color.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Color
[`@apply !text-${config.pill.font.color.active.light} dark:!text-${config.pill.font.color.active.dark}`]:
{},
//Background
[`@apply !bg-${config.pill.background.active.light} dark:!bg-${config.pill.background.active.dark}`]:
{},
//Shadow
[`@apply shadow-${config.pill.shadow.active.size} bg-${config.pill.shadow.active.light} dark:bg-${config.pill.shadow.active.dark}`]:
{},
},
//Item:no-icon
'&:not(.nui-has-icon)': {
'@apply flex items-center gap-1 py-2': {},
Expand All @@ -95,6 +60,229 @@ export default plugin(({ addComponents, theme }) => {
'@apply flex items-center gap-1 py-3': {},
},
},
//Color: default
'&.nui-tabs-default': {
//Tabs:item
'.nui-tab-item': {
//Item:inactive
'&:not(.nui-active)': {
//Base
'@apply border-transparent': {},
//Color
[`@apply text-${config.tabs.color.default.font.inactive.light} dark:text-${config.tabs.color.default.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Border
[`@apply border-${config.tabs.color.default.border.active.light} dark:border-${config.tabs.color.default.border.active.dark}`]:
{},
//Color
[`@apply text-${config.tabs.color.default.font.active.light} dark:text-${config.tabs.color.default.font.active.dark}`]:
{},
},
},
//Pills:item
'.nui-pill-item': {
//Item:inactive
'&:not(.nui-active)': {
//Color
[`@apply text-${config.pill.color.default.font.inactive.light} dark:text-${config.pill.color.default.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Color
[`@apply text-${config.pill.color.default.font.active.light} dark:text-${config.pill.color.default.font.active.dark}`]:
{},
//Background
[`@apply bg-${config.pill.color.default.background.active.light} dark:bg-${config.pill.color.default.background.active.dark}`]:
{},
//border
[`@apply border border-${config.pill.color.default.border.active.light} dark:border-${config.pill.color.default.border.active.dark}`]:
{},
//Shadow
[`@apply shadow-${config.pill.color.default.shadow.active.size} shadow-${config.pill.color.default.shadow.active.light} dark:shadow-${config.pill.color.default.shadow.active.dark}`]:
{},
},
},
},
//Color: primary
'&.nui-tabs-primary': {
//Tabs:item
'.nui-tab-item': {
//Item:inactive
'&:not(.nui-active)': {
//Base
'@apply border-transparent': {},
//Color
[`@apply text-${config.tabs.color.primary.font.inactive.light} dark:text-${config.tabs.color.primary.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Border
[`@apply border-${config.tabs.color.primary.border.active.light} dark:border-${config.tabs.color.primary.border.active.dark}`]:
{},
//Color
[`@apply text-${config.tabs.color.primary.font.active.light} dark:text-${config.tabs.color.primary.font.active.dark}`]:
{},
},
},
//Pills:item
'.nui-pill-item': {
//Item:inactive
'&:not(.nui-active)': {
//Color
[`@apply text-${config.pill.color.primary.font.inactive.light} dark:text-${config.pill.color.primary.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Color
[`@apply text-${config.pill.color.primary.font.active.light} dark:text-${config.pill.color.primary.font.active.dark}`]:
{},
//Background
[`@apply !bg-${config.pill.color.primary.background.active.light} dark:!bg-${config.pill.color.primary.background.active.dark}`]:
{},
//Shadow
[`@apply shadow-${config.pill.color.primary.shadow.active.size} bg-${config.pill.color.primary.shadow.active.light} dark:bg-${config.pill.color.primary.shadow.active.dark}`]:
{},
},
},
},
//Color: light
'&.nui-tabs-light': {
//Tabs:item
'.nui-tab-item': {
//Item:inactive
'&:not(.nui-active)': {
//Base
'@apply border-transparent': {},
//Color
[`@apply text-${config.tabs.color.light.font.inactive.light} dark:text-${config.tabs.color.light.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Border
[`@apply border-${config.tabs.color.light.border.active.light} dark:border-${config.tabs.color.light.border.active.dark}`]:
{},
//Color
[`@apply text-${config.tabs.color.light.font.active.light} dark:text-${config.tabs.color.light.font.active.dark}`]:
{},
},
},
//Pills:item
'.nui-pill-item': {
//Item:inactive
'&:not(.nui-active)': {
//Color
[`@apply text-${config.pill.color.light.font.inactive.light} dark:text-${config.pill.color.light.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Color
[`@apply text-${config.pill.color.light.font.active.light} dark:text-${config.pill.color.light.font.active.dark}`]:
{},
//Background
[`@apply !bg-${config.pill.color.light.background.active.light} dark:!bg-${config.pill.color.light.background.active.dark}`]:
{},
//Shadow
[`@apply shadow-${config.pill.color.light.shadow.active.size} shadow-${config.pill.color.light.shadow.active.light} dark:shadow-${config.pill.color.light.shadow.active.dark}`]:
{},
},
},
},
//Color: dark
'&.nui-tabs-dark': {
//Tabs:item
'.nui-tab-item': {
//Item:inactive
'&:not(.nui-active)': {
//Base
'@apply border-transparent': {},
//Color
[`@apply text-${config.tabs.color.dark.font.inactive.light} dark:text-${config.tabs.color.dark.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Border
[`@apply border-${config.tabs.color.dark.border.active.light} dark:border-${config.tabs.color.dark.border.active.dark}`]:
{},
//Color
[`@apply text-${config.tabs.color.dark.font.active.light} dark:text-${config.tabs.color.dark.font.active.dark}`]:
{},
},
},
//Pills:item
'.nui-pill-item': {
//Item:inactive
'&:not(.nui-active)': {
//Color
[`@apply text-${config.pill.color.dark.font.inactive.light} dark:text-${config.pill.color.dark.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Color
[`@apply text-${config.pill.color.dark.font.active.light} dark:text-${config.pill.color.dark.font.active.dark}`]:
{},
//Background
[`@apply !bg-${config.pill.color.dark.background.active.light} dark:!bg-${config.pill.color.dark.background.active.dark}`]:
{},
//Shadow
[`@apply shadow-${config.pill.color.dark.shadow.active.size} shadow-${config.pill.color.dark.shadow.active.light} dark:shadow-${config.pill.color.dark.shadow.active.dark}`]:
{},
},
},
},
//Color: black
'&.nui-tabs-black': {
//Tabs:item
'.nui-tab-item': {
//Item:inactive
'&:not(.nui-active)': {
//Base
'@apply border-transparent': {},
//Color
[`@apply text-${config.tabs.color.black.font.inactive.light} dark:text-${config.tabs.color.black.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Border
[`@apply border-${config.tabs.color.black.border.active.light} dark:border-${config.tabs.color.black.border.active.dark}`]:
{},
//Color
[`@apply text-${config.tabs.color.black.font.active.light} dark:text-${config.tabs.color.black.font.active.dark}`]:
{},
},
},
//Pills:item
'.nui-pill-item': {
//Item:inactive
'&:not(.nui-active)': {
//Color
[`@apply text-${config.pill.color.black.font.inactive.light} dark:text-${config.pill.color.black.font.inactive.dark}`]:
{},
},
//Item:active
'&.nui-active': {
//Color
[`@apply text-${config.pill.color.black.font.active.light} dark:text-${config.pill.color.black.font.active.dark}`]:
{},
//Background
[`@apply !bg-${config.pill.color.black.background.active.light} dark:!bg-${config.pill.color.black.background.active.dark}`]:
{},
//Shadow
[`@apply shadow-${config.pill.color.black.shadow.active.size} shadow-${config.pill.color.black.shadow.active.light} dark:shadow-${config.pill.color.black.shadow.active.dark}`]:
{},
},
},
},
//Tabs:content
'.nui-tab-content': {
'@apply relative block': {},
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/components/tabs/tabs.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const Tabs = ({
tabs,
type = 'tabs',
justify = 'start',
color = 'primary',
hideLabel,
bordered = true,
classes,
Expand All @@ -22,6 +23,7 @@ export const Tabs = ({
class=${[
'nui-tabs',
justify && variants.justify[justify],
color && variants.color[color],
type === 'tabs' && bordered && 'nui-tabs-bordered',
classes?.wrapper,
]
Expand Down
Loading

0 comments on commit 7534198

Please sign in to comment.