diff --git a/packages/opub-ui/package.json b/packages/opub-ui/package.json index c7bb52cd..618a366a 100644 --- a/packages/opub-ui/package.json +++ b/packages/opub-ui/package.json @@ -1,7 +1,7 @@ { "name": "opub-ui", "description": "OPub UI Library", - "version": "0.3.41", + "version": "0.3.43", "private": false, "license": "MIT", "author": "CivicDataLab ", diff --git a/packages/opub-ui/src/components/Tabs/Tabs.module.scss b/packages/opub-ui/src/components/Tabs/Tabs.module.scss index 03626f08..edc6851d 100644 --- a/packages/opub-ui/src/components/Tabs/Tabs.module.scss +++ b/packages/opub-ui/src/components/Tabs/Tabs.module.scss @@ -77,6 +77,11 @@ $item-min-width: 50px; font-weight: 500; } + .TitleClimateTheme { + color: var(--text-subdued, #484b51); + font-weight: 500; + } + svg { color: var(--icon-highlight); } @@ -93,6 +98,19 @@ $item-min-width: 50px; background: var(--action-primary-basic-default, #6e56cf); } } + + &.ActiveBorderClimateTheme { + background-color: #e0f8e2; + font-weight: 400; + color: var(--text-subdued, #484b51); + border: 1px solid var(--border-subdued, #d7dbdf); + border-bottom: none; + box-shadow: var(--shadow-element-popover); + + &::before { + background: #71e57d; + } + } } } diff --git a/packages/opub-ui/src/components/Tabs/Tabs.stories.tsx b/packages/opub-ui/src/components/Tabs/Tabs.stories.tsx index 9beb138c..7c851dee 100644 --- a/packages/opub-ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/opub-ui/src/components/Tabs/Tabs.stories.tsx @@ -41,6 +41,38 @@ export const Default: Story = { args: {}, }; +export const GreenTheme: Story = { + render: ({ ...args }) => { + return ( + <> + + + + Tab Name 1 + + + Tab Name 2 + + + Tab Name 3 + + + +
1
+
+ +
2
+
+ +
3
+
+
+ + ); + }, + args: {}, +}; + export const Fitted: Story = { render: () => { return ( diff --git a/packages/opub-ui/src/components/Tabs/Tabs.tsx b/packages/opub-ui/src/components/Tabs/Tabs.tsx index c1c76b68..d7e227aa 100644 --- a/packages/opub-ui/src/components/Tabs/Tabs.tsx +++ b/packages/opub-ui/src/components/Tabs/Tabs.tsx @@ -35,11 +35,12 @@ const TabList = forwardRef((props: ListProps, ref: any) => { type TabProps = { activeBorder?: boolean; + theme?: 'climate' | 'default'; } & TabsRadix.TabsTriggerProps; const Tab = forwardRef( ( - { children, className, activeBorder = true, ...props }: TabProps, + { children, className, activeBorder = true, theme, ...props }: TabProps, ref: any ) => { return ( @@ -48,10 +49,16 @@ const Tab = forwardRef( className={cn( styles.Tab, activeBorder && styles.ActiveBorder, + theme === 'climate' && styles.ActiveBorderClimateTheme, className )} > - + {children}