├── CatDesign ├── __init__.py ├── .idea │ ├── .name │ ├── .gitignore │ ├── misc.xml │ ├── inspectionProfiles │ │ ├── profiles_settings.xml │ │ └── Project_Default.xml │ ├── vcs.xml │ ├── modules.xml │ └── CatDesign.iml ├── images │ ├── cat0.png │ ├── cat1.png │ ├── cat2.png │ ├── cat3.png │ ├── cat4.png │ ├── cat5.png │ ├── cat_card.png │ ├── cat_card2.png │ └── cat_card3.png ├── __pycache__ │ ├── main.cpython-313.pyc │ ├── cat_design.cpython-310.pyc │ └── cat_design.cpython-313.pyc ├── styles │ ├── __pycache__ │ │ ├── colors.cpython-313.pyc │ │ └── fonts.cpython-313.pyc │ ├── styles.py │ ├── colors.py │ └── fonts.py ├── components │ ├── layout │ │ ├── div.py │ │ ├── __pycache__ │ │ │ ├── box.cpython-310.pyc │ │ │ ├── box.cpython-313.pyc │ │ │ ├── div.cpython-310.pyc │ │ │ └── div.cpython-313.pyc │ │ └── box.py │ ├── basics │ │ ├── __pycache__ │ │ │ ├── avatar.cpython-310.pyc │ │ │ ├── avatar.cpython-313.pyc │ │ │ ├── chip.cpython-310.pyc │ │ │ ├── chip.cpython-313.pyc │ │ │ ├── rating.cpython-310.pyc │ │ │ ├── rating.cpython-313.pyc │ │ │ ├── divider.cpython-310.pyc │ │ │ ├── divider.cpython-313.pyc │ │ │ ├── typography.cpython-310.pyc │ │ │ └── typography.cpython-313.pyc │ │ ├── avatar.py │ │ ├── divider.py │ │ ├── rating.py │ │ ├── typography.py │ │ └── chip.py │ ├── custom │ │ ├── __pycache__ │ │ │ ├── card.cpython-310.pyc │ │ │ ├── card.cpython-313.pyc │ │ │ ├── bar_chart.cpython-310.pyc │ │ │ ├── bar_chart.cpython-313.pyc │ │ │ ├── line_chart.cpython-310.pyc │ │ │ ├── line_chart.cpython-313.pyc │ │ │ ├── tweet_card.cpython-310.pyc │ │ │ ├── notification.cpython-310.pyc │ │ │ └── notification.cpython-313.pyc │ │ ├── notification.py │ │ ├── bar_chart.py │ │ ├── card.py │ │ ├── line_chart.py │ │ └── tweet_card.py │ ├── feedback │ │ ├── __pycache__ │ │ │ ├── alert.cpython-310.pyc │ │ │ ├── alert.cpython-313.pyc │ │ │ └── status.cpython-310.pyc │ │ ├── status.py │ │ └── alert.py │ └── icons │ │ ├── arrow-up │ │ ├── arrow-up_filled.svg │ │ └── arrow-up_outlined.svg │ │ ├── arrow-left │ │ ├── arrow-left_filled.svg │ │ └── arrow-left_outlined.svg │ │ ├── chevron-left │ │ └── chevron-left_outlined.svg │ │ ├── chevron-right │ │ └── chevron-right_outlined.svg │ │ ├── arrow-right │ │ ├── arrow-right_filled.svg │ │ └── arrow-right_outlined.svg │ │ ├── arrow-up-left │ │ ├── arrow-up-left_filled.svg │ │ └── arrow-up-left_outlined.svg │ │ ├── arrow-up-right │ │ ├── arrow-up-right_filled.svg │ │ └── arrow-up-right_outlined.svg │ │ ├── hamburger │ │ └── hamburger_outlined.svg │ │ ├── minus-circle │ │ ├── minus-circle_outlined.svg │ │ └── minus-circle_filled.svg │ │ ├── arrow-down-left │ │ ├── arrow-down-left_filled.svg │ │ └── arrow-down-left_outlined.svg │ │ ├── arrow-down-right │ │ ├── arrow-down-right_filled.svg │ │ └── arrow-down-right_outlined.svg │ │ ├── cloud │ │ ├── cloud_filled.svg │ │ └── cloud_outlined.svg │ │ ├── share │ │ ├── share_filled.svg │ │ └── share_outlined.svg │ │ ├── arrow-down │ │ ├── arrow-down_filled.svg │ │ └── arrow-down_outlined.svg │ │ ├── envelope │ │ ├── envelope_filled.svg │ │ └── envelope_outlined.svg │ │ ├── ellipsis │ │ └── ellipsis_outlined.svg │ │ ├── like │ │ ├── like_outlined.svg │ │ └── like_filled.svg │ │ ├── refresh │ │ └── refresh_outlined.svg │ │ ├── map-pin │ │ ├── map-pin_outlined.svg │ │ └── map-pin_filled.svg │ │ ├── bell │ │ ├── bell_outlined.svg │ │ └── bell_filled.svg │ │ ├── settings │ │ ├── settings_outlined.svg │ │ └── settings_filled.svg │ │ ├── chat │ │ ├── chat_filled.svg │ │ └── chat_outlined.svg │ │ ├── star │ │ ├── star_filled.svg │ │ └── star_outlined.svg │ │ ├── envelope-open │ │ ├── envelope-open_filled.svg │ │ └── envelope-open_outlined.svg │ │ ├── map │ │ ├── map_outlined.svg │ │ └── map_filled.svg │ │ ├── trash │ │ ├── trash_outlined.svg │ │ └── trash_filled.svg │ │ └── hand-thumb-up │ │ ├── hand-thumb-up_filled.svg │ │ └── hand-thumb-up_outlined.svg ├── cat_design.py └── main.py ├── .DS_Store ├── .idea └── .gitignore ├── .gitignore ├── LICENSE └── README.md /CatDesign/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CatDesign/.idea/.name: -------------------------------------------------------------------------------- 1 | main.py -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/.DS_Store -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /CatDesign/.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /CatDesign/images/cat0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat0.png -------------------------------------------------------------------------------- /CatDesign/images/cat1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat1.png -------------------------------------------------------------------------------- /CatDesign/images/cat2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat2.png -------------------------------------------------------------------------------- /CatDesign/images/cat3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat3.png -------------------------------------------------------------------------------- /CatDesign/images/cat4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat4.png -------------------------------------------------------------------------------- /CatDesign/images/cat5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat5.png -------------------------------------------------------------------------------- /CatDesign/images/cat_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat_card.png -------------------------------------------------------------------------------- /CatDesign/images/cat_card2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat_card2.png -------------------------------------------------------------------------------- /CatDesign/images/cat_card3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/images/cat_card3.png -------------------------------------------------------------------------------- /CatDesign/__pycache__/main.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/__pycache__/main.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/__pycache__/cat_design.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/__pycache__/cat_design.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/__pycache__/cat_design.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/__pycache__/cat_design.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/styles/__pycache__/colors.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/styles/__pycache__/colors.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/styles/__pycache__/fonts.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/styles/__pycache__/fonts.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/layout/div.py: -------------------------------------------------------------------------------- 1 | def div(ui, css='', tailwind=''): 2 | """Create a div element.""" 3 | return ui.element('div').style(css).classes(tailwind) -------------------------------------------------------------------------------- /CatDesign/components/layout/__pycache__/box.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/layout/__pycache__/box.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/layout/__pycache__/box.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/layout/__pycache__/box.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/layout/__pycache__/div.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/layout/__pycache__/div.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/layout/__pycache__/div.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/layout/__pycache__/div.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/avatar.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/avatar.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/avatar.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/avatar.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/chip.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/chip.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/chip.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/chip.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/rating.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/rating.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/rating.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/rating.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/card.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/card.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/card.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/card.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/divider.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/divider.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/divider.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/divider.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/feedback/__pycache__/alert.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/feedback/__pycache__/alert.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/feedback/__pycache__/alert.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/feedback/__pycache__/alert.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/feedback/__pycache__/status.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/feedback/__pycache__/status.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/typography.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/typography.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/__pycache__/typography.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/basics/__pycache__/typography.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/bar_chart.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/bar_chart.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/bar_chart.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/bar_chart.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/line_chart.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/line_chart.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/line_chart.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/line_chart.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/tweet_card.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/tweet_card.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/basics/avatar.py: -------------------------------------------------------------------------------- 1 | def avatar(ui, img_src, css='', tailwind=''): 2 | ui.image(img_src).style('border-radius: 50%; height: 32px; width: 32px;' + css).tailwind(tailwind) -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/notification.cpython-310.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/notification.cpython-310.pyc -------------------------------------------------------------------------------- /CatDesign/components/custom/__pycache__/notification.cpython-313.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofenbach/CatDesign/HEAD/CatDesign/components/custom/__pycache__/notification.cpython-313.pyc -------------------------------------------------------------------------------- /CatDesign/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /CatDesign/.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-up/arrow-up_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-up/arrow-up_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-left/arrow-left_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-left/arrow-left_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/chevron-left/chevron-left_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/chevron-right/chevron-right_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-right/arrow-right_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-right/arrow-right_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-up-left/arrow-up-left_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-up-right/arrow-up-right_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/hamburger/hamburger_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/minus-circle/minus-circle_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-down-left/arrow-down-left_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-down-left/arrow-down-left_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-down-right/arrow-down-right_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-down-right/arrow-down-right_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-up-left/arrow-up-left_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-up-right/arrow-up-right_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /CatDesign/components/icons/cloud/cloud_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/share/share_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/minus-circle/minus-circle_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-down/arrow-down_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/arrow-down/arrow-down_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/envelope/envelope_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /CatDesign/components/icons/cloud/cloud_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/ellipsis/ellipsis_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/like/like_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/refresh/refresh_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/map-pin/map-pin_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /CatDesign/components/basics/divider.py: -------------------------------------------------------------------------------- 1 | def divider(ui, css='background-color: #26282C', tailwind='mt-8 mb-8', ): 2 | """ 3 | Creates a divider between sections. 4 | 5 | :param classes: CSS classes for the divider 6 | :param style: CSS styles for the divider 7 | """ 8 | def div(): 9 | """Create a div element.""" 10 | return ui.element('div') 11 | div().classes('w-full h-px ' + tailwind).style(css) -------------------------------------------------------------------------------- /CatDesign/components/icons/bell/bell_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/settings/settings_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/chat/chat_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/chat/chat_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/bell/bell_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/star/star_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/envelope/envelope_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/share/share_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | -------------------------------------------------------------------------------- /CatDesign/.idea/CatDesign.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | -------------------------------------------------------------------------------- /CatDesign/components/icons/map-pin/map-pin_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/like/like_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/envelope-open/envelope-open_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /CatDesign/components/layout/box.py: -------------------------------------------------------------------------------- 1 | from components.layout.div import div 2 | 3 | 4 | def box(ui, color_scheme, css='', tailwind=''): 5 | """ 6 | Create a box with given classes and style. 7 | 8 | :param classes: class names for the box 9 | :param style: style for the box 10 | :return: a styled div element 11 | """ 12 | 13 | return div(ui, css=f'background-color: {color_scheme.color_box}; border: 1px solid {color_scheme.color_border};' 14 | f'padding: 32px; border-radius: 8px;{css}', tailwind=tailwind) 15 | -------------------------------------------------------------------------------- /CatDesign/components/basics/rating.py: -------------------------------------------------------------------------------- 1 | from components.layout.div import div 2 | 3 | 4 | def rating(ui, color_scheme, stars=4, css='', tailwind=''): 5 | """ 1-5 Stars display """ 6 | with div(ui, css=css, tailwind='flex flex-wrap justify-between'+tailwind): 7 | for i in range(5): 8 | if i < stars: 9 | ui.icon('star').classes('text-3xl').style(f'color: {color_scheme.warning}') 10 | else: 11 | ui.icon('star_border').classes('text-3xl').style(f'color: {color_scheme.warning}') 12 | -------------------------------------------------------------------------------- /CatDesign/components/icons/map/map_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/styles/styles.py: -------------------------------------------------------------------------------- 1 | from nicegui import ui 2 | from colors import ColorScheme 3 | from fonts import FontScheme 4 | 5 | # Initialize the ui and style objects 6 | ui_obj = ui 7 | color_scheme = ColorScheme(ui_obj) 8 | font_scheme = FontScheme() 9 | 10 | # Add the basic styles to the head 11 | head_style = """ 12 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); 13 | body { 14 | font-family: 'Poppins'; 15 | background-color: #0A0B0C; 16 | margin: 0; 17 | } 18 | """ 19 | ui_obj.add_head_html(f'') 20 | -------------------------------------------------------------------------------- /CatDesign/components/icons/star/star_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/map/map_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/envelope-open/envelope-open_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/basics/typography.py: -------------------------------------------------------------------------------- 1 | def typography(ui, font_scheme, text='', variant='', css='', tailwind=''): 2 | valid_variants = ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption", 3 | "overline"] 4 | if variant not in valid_variants: 5 | raise ValueError("Unsupported variant: {}. Valid variants are: {}".format(variant, ', '.join(valid_variants))) 6 | 7 | font_style = getattr(font_scheme, variant) 8 | tailwind_classes = tailwind.split(' ') 9 | ui.label(text).style(font_style + css).tailwind(*tailwind_classes) # split big string into small strings -------------------------------------------------------------------------------- /CatDesign/components/icons/trash/trash_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/settings/settings_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/basics/chip.py: -------------------------------------------------------------------------------- 1 | from components.layout.box import box 2 | from components.basics.typography import typography 3 | 4 | 5 | def chip(ui, font_scheme, color_scheme, css, tailwind, variant="filled", text="Chip"): 6 | 7 | if variant == "filled": 8 | css = "border-radius: 100px; padding: 16px; border: 0; " + css 9 | with box(ui, color_scheme, css=css): 10 | typography(ui, font_scheme, text=text, variant="h4") 11 | 12 | if variant == "outlined": 13 | css = "border-radius: 100px; padding: 16px; background-color: rgba(0,0,0,0); " + css 14 | with box(ui, color_scheme, css=css): 15 | typography(ui, font_scheme, text=text, variant="h4") -------------------------------------------------------------------------------- /CatDesign/components/icons/trash/trash_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/custom/notification.py: -------------------------------------------------------------------------------- 1 | from components.basics.typography import typography 2 | from components.layout.div import div 3 | 4 | 5 | def notification(ui, font_scheme, color_scheme, header, subheader, css='', tailwind='', color="#6CCAFF"): 6 | """ Note this still uses Poppins, todo: typography update """ 7 | 8 | with div(ui, css=css, tailwind=tailwind): 9 | with ui.element('div').style( 10 | f'padding-top: 16px; padding-bottom: 16px; padding-left: 32px; padding-right: 32px; background-color: {color_scheme.color_box}; border: 1px solid {color_scheme.color_border}; border-left: 8px solid {color}; border-radius: 8px;'): 11 | typography(ui, font_scheme, header, variant="h2", css="margin-bottom: 16px;") 12 | ui.label(subheader).style('font-size: 16px; color: #A6A6A6;') 13 | 14 | -------------------------------------------------------------------------------- /CatDesign/components/icons/hand-thumb-up/hand-thumb-up_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /CatDesign/components/icons/hand-thumb-up/hand-thumb-up_outlined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | CatDesign/components/__pycache__/box.cpython-310.pyc 3 | .idea/inspectionProfiles/profiles_settings.xml 4 | .idea/CatDesign.iml 5 | .idea/misc.xml 6 | .idea/modules.xml 7 | .idea/vcs.xml 8 | CatDesign/components/__pycache__/card.cpython-310.pyc 9 | CatDesign/components/__pycache__/divider.cpython-310.pyc 10 | CatDesign/components/__pycache__/status.cpython-310.pyc 11 | CatDesign/components/__pycache__/typography.cpython-310.pyc 12 | CatDesign/styles/__pycache__/colors.cpython-310.pyc 13 | CatDesign/styles/__pycache__/fonts.cpython-310.pyc 14 | CatDesign/components/__pycache__/chip.cpython-310.pyc 15 | CatDesign/components/__pycache__/avatar.cpython-310.pyc 16 | CatDesign/components/__pycache__/avatar.cpython-310.pyc 17 | CatDesign/components/__pycache__/avatar.cpython-310.pyc 18 | CatDesign/components/__pycache__/div.cpython-310.pyc 19 | CatDesign/components/__pycache__/avatar.cpython-310.pyc 20 | CatDesign/components/__pycache__/notification.cpython-310.pyc 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 ofenbach 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /CatDesign/components/custom/bar_chart.py: -------------------------------------------------------------------------------- 1 | from components.layout.box import box 2 | 3 | def bar_chart(ui, color_scheme, data=None, labels=None, css='', tailwind=''): 4 | """ 5 | :param data: Data for the chart 6 | :param labels: Labels for the chart 7 | """ 8 | # Default values if none provided 9 | if data is None: 10 | data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] 11 | if labels is None: 12 | labels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5', 'Label6', 'Label7', 'Label8', 'Label9', 'Label10'] 13 | 14 | # Assigning a color scheme for the chart to match the CatDesign style 15 | color_chart_scheme = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'] 16 | 17 | # Creating the chart options 18 | chart_options = { 19 | 'chart': {'type': 'column', 'backgroundColor': 'transparent'}, 20 | 'title': False, 21 | 'xAxis': {'categories': labels, 'labels': {'style': {'color': '#fff'}}, 'gridLineWidth': 0}, 22 | 'yAxis': {'title': False, 'gridLineColor': '#606063', 'labels': {'style': {'color': '#fff'}}, 'gridLineWidth': 0}, 23 | 'legend': {'itemStyle': {'color': '#fff'}}, 24 | 'plotOptions': { 25 | 'series': { 26 | 'borderColor': '#000', 27 | 'borderRadius': 8 # New attribute for rounded corners 28 | } 29 | }, 30 | 'series': [{'name': label, 'data': [datum], 'color': color} for label, datum, color in zip(labels, data, color_chart_scheme)] 31 | } 32 | 33 | with box(ui, color_scheme=color_scheme, css=f'height: 400px; width: 100%;' + css, tailwind=tailwind): 34 | ui.echart(chart_options) 35 | -------------------------------------------------------------------------------- /CatDesign/components/custom/card.py: -------------------------------------------------------------------------------- 1 | from components.basics.divider import divider 2 | from components.basics.typography import typography 3 | from components.layout.div import div 4 | 5 | 6 | def card(ui, font_scheme, color_scheme, img_src="", header="Heading", sub_header="Subheading", css="", tailwind=""): 7 | style = f""" 8 | .card {{ 9 | padding: 24px; 10 | background-color: {color_scheme.color_box}; 11 | border: 1px solid {color_scheme.color_border}; 12 | border-radius: 8px; 13 | transition: 0.3s; 14 | }} 15 | .card:hover {{ 16 | transition: 0.3s; 17 | box-shadow: 0px 0px 24px rgba(255,255,255,0.06); 18 | border: 1px solid rgba(0,0,0,0); 19 | }} 20 | .image_card_hover {{ 21 | transition: 0.3s; 22 | }} 23 | .image_card_hover:hover {{ 24 | transition: 0.3s; 25 | transform: scale(1.1); 26 | cursor: pointer; 27 | }} 28 | """ 29 | ui.add_head_html(f'') 30 | 31 | with div(ui, css=css, tailwind=tailwind): 32 | with ui.element('div').classes('card'): 33 | 34 | with ui.row().classes('image_card_hover'): 35 | ui.image(img_src).classes('rounded-2 w-80 h-44') 36 | 37 | divider(ui) 38 | 39 | with ui.row(): 40 | typography(ui, font_scheme, header, "h4") 41 | 42 | with ui.row().classes('mt-4'): 43 | typography(ui, font_scheme, sub_header, "body1") 44 | 45 | 46 | -------------------------------------------------------------------------------- /CatDesign/styles/colors.py: -------------------------------------------------------------------------------- 1 | 2 | class ColorScheme: 3 | """ 4 | A class to represent a dark theme color scheme for a design system. 5 | 6 | ... 7 | 8 | Attributes 9 | ---------- 10 | primary : str 11 | primary color of the design system. 12 | secondary : str 13 | secondary color of the design system. 14 | success : str 15 | color for successful actions or notifications. 16 | info : str 17 | color for informational messages. 18 | warning : str 19 | color for warnings. 20 | danger : str 21 | color for errors or dangerous actions. 22 | background : str 23 | background color of the design system. 24 | text : str 25 | default text color. 26 | 27 | Methods 28 | ------- 29 | get_color(name): 30 | Returns the color value from the scheme by its name. 31 | """ 32 | 33 | def __init__(self, ui): 34 | """Constructs all the necessary attributes for the color scheme object.""" 35 | self.primary = '#757575' 36 | self.secondary = '#607D8B' 37 | self.success = '#4CAF50' 38 | self.info = '#2196F3' 39 | self.warning = '#FEFF86' 40 | self.danger = '#F44336' 41 | self.background = '#212121' 42 | self.text = '#E0E0E0' 43 | self.color_box = '#131416' 44 | self.color_border = '#26282C' 45 | ui.colors(primary=self.primary) 46 | ui.colors(secondary=self.secondary) 47 | 48 | def get_color(self, name): 49 | """ 50 | Retrieves the color value from the scheme by its name. 51 | 52 | Parameters: 53 | name (str): The name of the color (e.g., 'primary', 'success', etc.) 54 | 55 | Returns: 56 | str: The color value. 57 | """ 58 | try: 59 | return getattr(self, name) 60 | except AttributeError: 61 | raise ValueError(f"No color named {name} in the color scheme.") 62 | -------------------------------------------------------------------------------- /CatDesign/components/feedback/status.py: -------------------------------------------------------------------------------- 1 | def status(ui, type="green", message="Everything is fine!"): 2 | """ 3 | :param message: message to appear in the status 4 | :param type: green, yellow, red 5 | """ 6 | color_yellow = '#BEB82F' 7 | color_lightyellow = '#F7F5E5' 8 | color_lightred = '#F7E5E5' 9 | color_red = '#BE2F2F' 10 | 11 | def div(): 12 | """Create a div element.""" 13 | return ui.element('div') 14 | 15 | match type: 16 | case "green": 17 | with ui.element('button').style( 18 | 'border-radius: 2px; background-color: #E8F7E5; display: flex; align-items: center; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px;'): 19 | div().style( 20 | 'background-color: #3CBE2F; border-radius: 50px; width: 16px; height: 16px; margin-right: 16px;') 21 | ui.label(message).style('color: #3CBE2F;') 22 | case "yellow": 23 | with ui.element('button').style( 24 | f'border-radius: 2px; background-color: {color_lightyellow}; display: flex; align-items: center; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px;'): 25 | div().style( 26 | f'background-color: {color_yellow}; border-radius: 50px; width: 16px; height: 16px; margin-right: 16px;') 27 | ui.label(message).style(f'color: {color_yellow};') 28 | case "red": 29 | with ui.element('button').style( 30 | f'border-radius: 2px; background-color: {color_lightred}; display: flex; align-items: center; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px;'): 31 | div().style( 32 | f'background-color: {color_red}; border-radius: 50px; width: 16px; height: 16px; margin-right: 16px;') 33 | ui.label(message).style(f'color: {color_red};') 34 | -------------------------------------------------------------------------------- /CatDesign/components/feedback/alert.py: -------------------------------------------------------------------------------- 1 | from components.layout.div import div 2 | 3 | 4 | def alert(ui, type="success", message="Operation successful!", css='', tailwind=''): 5 | """ 6 | :param message: message to appear in the alert 7 | :param type: success, info, warning, error 8 | """ 9 | color_blue = '#2196F3' 10 | color_lightblue = '#E5F1F7' 11 | color_lightyellow = '#F7F5E5' 12 | color_yellow = '#BEB82F' 13 | color_lightred = '#F7E5E5' 14 | color_red = '#BE2F2F' 15 | color_lightgreen = '#E8F7E5' 16 | color_green = '#3CBE2F' 17 | 18 | match type: 19 | case "success": 20 | with div(ui, css=f'border-radius: 2px; background-color: {color_lightgreen};' 21 | f' display: flex; align-items: center; padding: 8px 16px;'+css, tailwind=tailwind): 22 | ui.icon('task_alt').classes('text-3xl').style(f'color: {color_green}; margin-right: 0.5em;') 23 | ui.label(message).style(f'color: {color_green};') 24 | case "info": 25 | with div(ui, css=f'border-radius: 2px; background-color: {color_lightblue};' 26 | f' display: flex; align-items: center; padding: 8px 16px;' + css, tailwind=tailwind): 27 | ui.icon('info').classes('text-3xl').style(f'color: {color_blue}; margin-right: 0.5em;') 28 | ui.label(message).style(f'color: {color_blue};') 29 | case "warning": 30 | with div(ui, css=f'border-radius: 2px; background-color: {color_lightyellow};' 31 | f' display: flex; align-items: center; padding: 8px 16px;' + css, tailwind=tailwind): 32 | ui.icon('warning_amber').classes('text-3xl').style(f'color: {color_yellow}; margin-right: 0.5em;') 33 | ui.label(message).style(f'color: {color_yellow};') 34 | case "error": 35 | with div(ui, css=f'border-radius: 2px; background-color: {color_lightred};' 36 | f' display: flex; align-items: center; padding: 8px 16px;' + css, tailwind=tailwind): 37 | ui.icon('report_gmailerrorred').classes('text-3xl').style(f'color: {color_red}; margin-right: 0.5em;') 38 | ui.label(message).style(f'color: {color_red};') 39 | -------------------------------------------------------------------------------- /CatDesign/components/custom/line_chart.py: -------------------------------------------------------------------------------- 1 | from components.layout.box import box 2 | 3 | def line_chart(ui, color_scheme, data=None, labels=None, css='', tailwind='', color='blue'): 4 | """ 5 | :param data: List of series for the chart. Each series should be a list of data points. 6 | :param labels: Labels for the x-axis of the chart. 7 | """ 8 | # Default values if none provided 9 | if data is None: 10 | data = [[15, 25, 10, 32, 40, 60, 30, 15, 20,25, 28,26,20]] 11 | if labels is None: 12 | labels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'] 13 | 14 | # Assigning a color scheme for the chart to match the CatDesign style 15 | color_chart_scheme = ['#64FF50'] # CatDesign blue ##64FF50 16 | 17 | # Creating the chart options 18 | chart_options = { 19 | 'chart': {'type': 'areaspline', 'backgroundColor': 'transparent'}, 20 | 'title': False, 21 | 'xAxis': {'categories': labels, 'labels': {'style': {'color': '#fff'}}}, 22 | 'yAxis': { 23 | 'title': False, 24 | 'gridLineWidth': 0, # This removes the grid lines 25 | 'labels': {'style': {'color': '#fff'}} 26 | }, 27 | 'legend': {'itemStyle': {'color': '#fff'}}, 28 | 'plotOptions': { 29 | 'series': { 30 | 'marker': { 31 | 'enabled': False, 32 | 'radius': 1 # Adjust to change marker size 33 | }, 34 | 'line': { 35 | 'dashStyle': 'Solid' 36 | }, 37 | 'fillColor': { 38 | 'linearGradient': { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 1 }, 39 | 'stops': [ 40 | [0, '#64FF50'], # Gradient starts with CatDesign blue 41 | [1, 'rgba(0,0,0,0)'] # Gradient to transparent 42 | ] 43 | }, 44 | 'fillOpacity': 0.5 # Transparency of the filled area 45 | } 46 | }, 47 | 'series': [{'name': f'Series {i+1}', 'data': datum, 'color': color_chart_scheme[0]} for i, datum in enumerate(data)] 48 | } 49 | 50 | with box(ui, color_scheme=color_scheme, css=f'' + css, tailwind=tailwind): 51 | ui.echart(chart_options) 52 | -------------------------------------------------------------------------------- /CatDesign/components/custom/tweet_card.py: -------------------------------------------------------------------------------- 1 | from CatDesign.components.basics.avatar import avatar 2 | 3 | 4 | def tweet_card(ui, color_scheme, profile_src, profile_name="Profile Name", tweet="Tweet!", retweet="Retweet!"): 5 | 6 | def div(): 7 | """Create a div element.""" 8 | return ui.element('div') 9 | 10 | with div().style(f'background-color: {color_scheme.color_box}; border: 1px solid {color_scheme.color_border}; box-shadow: ' 11 | 'none; color: white; padding: 32px; border-radius: 8px;'): 12 | # profile avatar 13 | with ui.row().classes('flex items-center'): 14 | ui.image(profile_src).classes('rounded-full h-8 w-8') 15 | ui.label(profile_name).classes('text-white text-base font-light') 16 | 17 | # tweet 18 | with ui.row().classes('mt-4'): 19 | ui.label(tweet).classes('text-base font-light').style('color: #D9D9D9;') 20 | 21 | # date, share_outlined.svg, like 22 | with ui.row().classes('flex justify-between items-center w-full mt-4'): 23 | ui.label("23.03.2023").classes('text-xs font-light').style('color: #A6A6A6;') 24 | with div(): 25 | ui.icon('share_outlined.svg').classes('mr-4 text-sm') 26 | ui.icon('thumb_up').classes('text-sm') 27 | 28 | # divider 29 | with ui.row().classes('w-full mt-8 mb-8'): 30 | div().classes('w-full h-px').style(f'background-color: {color_scheme.color_border}') 31 | 32 | # retweet profiles 33 | with ui.row().classes('flex justify-between items-center w-full'): 34 | with div(): 35 | avatar(ui, src='images/cat1.png', style='z-index: 3;') 36 | avatar(ui, src='images/cat2.png', style='margin-left: -16px; z-index: 2;') 37 | avatar(ui, src='images/cat3.png', style='margin-left: -16px; z-index: 1;') 38 | avatar(ui, src='images/cat4.png', style='margin-left: -16px; z-index: 0;') 39 | 40 | with div(): 41 | ui.label("Retweets").classes('text-xs font-light') 42 | 43 | # retweet 44 | with ui.row().classes('flex items-center mt-6'): 45 | avatar(ui, src='images/cat5.png') 46 | ui.label("Retweeter").classes('text-sm font-light text-white') 47 | 48 | with ui.row().classes('mt-4'): 49 | ui.label(retweet).classes('text-xs font-light').style('color: #D9D9D9') 50 | 51 | with ui.row().classes('w-full mt-8'): 52 | with ui.element("div").classes('flex w-full justify-center items-center rounded-full p-2').style( 53 | f'border: 1px solid {color_scheme.color_border}; box-shadow: none; background-color: {color_scheme.color_box};'): 54 | ui.label("Show all").classes('mr-4 text-xs text-white') 55 | ui.icon('expand_more').classes('text-white') 56 | 57 | -------------------------------------------------------------------------------- /CatDesign/styles/fonts.py: -------------------------------------------------------------------------------- 1 | class FontScheme: 2 | """ 3 | A class to represent a typography scheme for a modern UI design system. 4 | 5 | ... 6 | 7 | Attributes 8 | ---------- 9 | primary_font : str 10 | primary font of the design system. 11 | secondary_font : str 12 | secondary font of the design system. 13 | h1 : str 14 | styles for H1 headers. 15 | h2 : str 16 | styles for H2 headers. 17 | h3 : str 18 | styles for H3 headers. 19 | h4 : str 20 | styles for H4 headers. 21 | h5 : str 22 | styles for H5 headers. 23 | h6 : str 24 | styles for H6 headers. 25 | subtitle1 : str 26 | styles for first level subtitles. 27 | subtitle2 : str 28 | styles for second level subtitles. 29 | body1 : str 30 | styles for primary body text. 31 | body2 : str 32 | styles for secondary body text. 33 | caption : str 34 | styles for captions. 35 | overline : str 36 | styles for overlines. 37 | """ 38 | 39 | def __init__(self, color_scheme): 40 | """Constructs all the necessary attributes for the typography scheme object.""" 41 | self.primary_font = 'Poppins' 42 | self.secondary_font = 'Roboto' 43 | 44 | # Headers 45 | self.h1 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '2em', 'bold', 'white; ') 46 | self.h2 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '1.5em', 'bold', 'white; ') 47 | self.h3 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '1.17em', 'bold', 'white; ') 48 | self.h4 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '1em', 'bold', 'white; ') 49 | self.h5 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '0.875em', 'bold', 'white; ') 50 | self.h6 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '0.75em', 'bold', 'white; ') 51 | 52 | # Subtitles 53 | self.subtitle1 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '1em', 'medium', 'white; ') 54 | self.subtitle2 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '0.875em', 'medium', '#D9D9D9; ') 55 | 56 | # Body text 57 | self.body1 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '1em', 'normal', 'white; ') 58 | self.body2 = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.secondary_font, '0.875em', 'normal', 'white; ') 59 | 60 | # Caption & Overline 61 | self.caption = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '0.75em', 'light', 'white; ') 62 | self.overline = "font-family: {}; font-size: {}; font-weight: {}; color: {}".format(self.primary_font, '0.625em', 'light', 'white; ') 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CatDesign: A Design System for NiceGUI 2 | CatDesign is a comprehensive design system built on top of the innovative Python UI framework, NiceGUI. It offers a set of pre-styled components and features that are readily usable, allowing you to build visually appealing and consistent interfaces swiftly. 3 | 4 | ## Look and feel 5 | Here are some of the components already developed and ready for use in CatDesign: 6 | 7 | SCREENSHOT 6 8 | Bildschirmfoto 2023-05-18 um 15 37 15 9 | SCREENSHOT 5 10 | SCREENSHOT 7 11 | SCREENSHOT 4 12 | Bildschirmfoto 2023-05-13 um 14 17 11 13 | Bildschirmfoto 2023-05-13 um 14 17 06 14 | Bildschirmfoto 2023-05-13 um 14 17 02 15 | Bildschirmfoto 2023-07-07 um 10 46 09 16 | Bildschirmfoto 2023-07-07 um 11 27 01 17 | 18 | 19 | ## Features 20 | Currently, CatDesign provides the following components and features: 21 | Divider 22 | Card 23 | TweetCard 24 | Status 25 | Notification 26 | TextField 27 | Typography (using Poppins) 28 | Color scheme 29 | 30 | ## Upcoming Components 31 | Here are some components that will be available soon: 32 | RadioButton 33 | Switch 34 | Menu 35 | Header 36 | Footer 37 | 38 | ## Getting Started 39 | Take a look at the main.py for instructions. 40 | 41 | Here's an example of how to use CatDesign to create a card: 42 | ```python 43 | card(ui, font_scheme, color_scheme, "images/cat_card.png", "Hi! I am your cat.", "Feed me or I get angry.") 44 | ``` 45 | 46 | ## License 47 | CatDesign is under the MIT license. See the LICENSE file for more details. 48 | 49 | ## NiceGUI 50 | CatDesign is a design system tailored for NiceGUI, a web UI framework using Python. 51 | To learn more about NiceGUI and its capabilities, visit its [GitHub Repository](https://github.com/zauberzeug/nicegui). 52 | 53 | ## Other stuff 54 | Check out my latest audio mental health project which implements a few designs from catdesign: 55 | https://binauro.com or https://binauro.com/ambient-noises 56 | -------------------------------------------------------------------------------- /CatDesign/cat_design.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | from nicegui import ui 4 | 5 | from components.basics.avatar import avatar 6 | 7 | from components.basics.chip import chip 8 | from components.basics.divider import divider 9 | from components.basics.rating import rating 10 | from components.basics.typography import typography 11 | from components.custom.card import card 12 | from components.custom.bar_chart import bar_chart 13 | from components.custom.line_chart import line_chart 14 | from components.custom.notification import notification 15 | from components.feedback.alert import alert 16 | from components.layout.box import box 17 | from components.layout.div import div 18 | from styles.colors import ColorScheme 19 | from styles.fonts import FontScheme 20 | 21 | 22 | class CatDesign: 23 | """ 24 | CatDesign is a class for creating UI components with a specific design. 25 | """ 26 | 27 | def __init__(self): 28 | """ 29 | Initializes the CatDesign with a specific color scheme, font scheme, and UI. 30 | """ 31 | head_style = """ 32 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); 33 | body { 34 | font-family: 'Poppins'; 35 | background-color: #0A0B0C; 36 | margin: 0; 37 | } 38 | """ 39 | 40 | self.color_scheme = ColorScheme(ui) # init the colors 41 | self.font_scheme = FontScheme(self.color_scheme) # init the font 42 | self.ui = ui 43 | self.ui.add_head_html(f'') # add basic style 44 | self.ui.run(title="CatDesign") # start the UI event loop 45 | 46 | def div(self, css='', tailwind=''): 47 | return div(self.ui, css, tailwind) 48 | 49 | def typography(self, text='', variant='h1', css='', tailwind=''): 50 | typography(self.ui, self.font_scheme, text, variant, css, tailwind) 51 | 52 | def box(self, css='', tailwind=''): 53 | return box(self.ui, self.color_scheme, css, tailwind) 54 | 55 | def divider(self, css='background-color: #26282C', tailwind='mt-8 mb-8'): 56 | divider(self.ui, css, tailwind) 57 | 58 | def avatar(self, img_src='./images/cat0.png', css='', tailwind=''): 59 | avatar(self.ui, img_src=img_src, css=css, tailwind=tailwind) 60 | 61 | def card(self, img_src='./images/cat_card.png', header='Header', sub_header='Subheader', css='', tailwind=''): 62 | card(self.ui, self.font_scheme, self.color_scheme, img_src, header, sub_header, css, tailwind) 63 | 64 | def notification(self, header='Meow-tification', sub_header='Time to refill the food bowl, hooman!', css='', tailwind=''): 65 | notification(ui, self.font_scheme, self.color_scheme, header, sub_header, css, tailwind) 66 | 67 | def chip(self, variant='filled', css='', tailwind=''): 68 | chip(self.ui, self.font_scheme, self.color_scheme, variant=variant, css=css, tailwind=tailwind) 69 | 70 | def rating(self, stars=4, css='', tailwind=''): 71 | rating(self.ui, self.color_scheme, stars, css, tailwind) 72 | 73 | def alert(self, type='success', message='Success', css='', tailwind=''): 74 | alert(self.ui, type, message, css, tailwind) # todo: use font scheme + color scheme 75 | 76 | def icon(self, icon_name, color='#FFFFFF', variant='outlined', css='', tailwind=''): 77 | # validate variant 78 | if variant not in ['outlined', 'filled']: 79 | raise ValueError(f"Invalid variant '{variant}'. Expected 'outlined' or 'filled'.") 80 | 81 | # adjust icon name based on variant 82 | icon_file_name = f'{icon_name}_{variant}.svg' 83 | 84 | # adjust path to the icon file 85 | icon_path = os.path.join('components', 'icons', icon_name, icon_file_name) 86 | 87 | try: 88 | with open(icon_path, 'r') as file: 89 | svg_content = file.read().replace('currentColor', color) 90 | self.ui.html(svg_content).style(css) 91 | except FileNotFoundError: 92 | print(f"Icon '{icon_name}' not found in the '{variant}' variant.") 93 | 94 | def tweet_card(self, profile_src, profile_name='Profile Name', tweet='Tweet!', tweet_date='23.05.2023', retweet='Retweet!', liked=False): 95 | 96 | with div(ui, css=f'background-color: {self.color_scheme.color_box}; border: 1px solid {self.color_scheme.color_border};' 97 | f'box-shadow: none; color: white; padding: 32px; border-radius: 8px;'): 98 | 99 | # profile avatar 100 | with ui.row().classes('flex items-center'): 101 | ui.image(profile_src).classes('rounded-full h-8 w-8') 102 | self.typography(profile_name, variant='subtitle1') 103 | 104 | # tweet 105 | with ui.row().classes('mt-4'): 106 | self.typography(tweet, variant='h3') 107 | 108 | # date, share_outlined.svg, like 109 | with ui.row().classes('flex justify-between items-center w-full mt-4'): 110 | self.typography(tweet_date, variant='subtitle2', css='color: #A6A6A6;') 111 | with div(ui, tailwind='flex'): 112 | self.icon('share', css='margin-right: 16px;') 113 | self.icon('like', variant='filled' if liked else 'outlined') 114 | 115 | # divider 116 | self.divider() 117 | 118 | # retweet profiles 119 | with ui.row().classes('flex justify-between items-center w-full'): 120 | with div(ui): 121 | avatar(ui, img_src='images/cat1.png', css='z-index: 3;') 122 | avatar(ui, img_src='images/cat2.png', css='margin-left: -16px; z-index: 2;') 123 | avatar(ui, img_src='images/cat3.png', css='margin-left: -16px; z-index: 1;') 124 | avatar(ui, img_src='images/cat4.png', css='margin-left: -16px; z-index: 0;') 125 | 126 | with div(ui): 127 | self.typography('Retweets', variant='subtitle2', css='color: white;') 128 | 129 | # retweet 130 | with ui.row().classes('flex items-center mt-6'): 131 | avatar(ui, img_src='images/cat5.png') 132 | self.typography('Retweeter', variant='subtitle1') 133 | 134 | with ui.row().classes('mt-4'): 135 | self.typography(text=retweet, variant='subtitle2') 136 | 137 | with ui.row().classes('w-full mt-8'): 138 | ui.button('Show all').props('size=md icon-right=expand_more no-caps outline text-color=white').classes('rounded-full w-full ') 139 | 140 | def bar_chart(self, data=None, labels=None, css='', tailwind=''): 141 | bar_chart(self.ui, self.color_scheme, data, labels, css, tailwind) 142 | 143 | def line_chart(self, data=None, labels=None, css='', tailwind=''): 144 | line_chart(self.ui, self.color_scheme, data, labels, css, tailwind) 145 | 146 | def review_card(self, reviewer_name='Anonymous', review_date='Unknown date', review_text='No review text', 147 | review_rating=0, reviewer_avatar=None, css='', tailwind=''): 148 | with box(self.ui, self.color_scheme, 149 | css=f'background-color: {self.color_scheme.color_box}; border: 1px solid {self.color_scheme.color_border};' 150 | f'box-shadow: none; color: white; padding: 32px; border-radius: 8px;'): 151 | with self.ui.row().classes('items-center'): 152 | if reviewer_avatar: 153 | avatar(self.ui, img_src=reviewer_avatar, css='width: 64px; height: 64px; margin-right: 16px;') 154 | with self.ui.column(): 155 | typography(self.ui, self.font_scheme, text=reviewer_name, variant='subtitle1') 156 | rating(self.ui, self.color_scheme, stars=review_rating, 157 | css='display: inline-block; margin-right: 8px;') 158 | typography(self.ui, self.font_scheme, text=review_text, variant='body1', css='margin-top: 16px;') 159 | typography(self.ui, self.font_scheme, text=review_date, variant='subtitle2', 160 | css='margin-top: 16px; color: #A6A6A6;') 161 | -------------------------------------------------------------------------------- /CatDesign/main.py: -------------------------------------------------------------------------------- 1 | from nicegui import app 2 | from pathlib import Path 3 | 4 | from cat_design import CatDesign 5 | 6 | folder = Path(__file__).resolve().parent / 'images' 7 | app.add_static_files('/images', folder) # serve all files in this folder 8 | 9 | 10 | def main(): 11 | """ 12 | The main function to initiate the UI. 13 | """ 14 | 15 | cat = CatDesign() 16 | 17 | with cat.div(tailwind='ml-16 mr-16'): 18 | 19 | # typography 20 | with cat.div(tailwind='flex w-full justify-center'): 21 | cat.typography(text='Typography (in a box)', variant='h1', css='margin-top: 2em;', tailwind='ml-8') 22 | 23 | with cat.div(tailwind='flex w-full justify-center mt-8'): 24 | with cat.box(): 25 | cat.typography(text='H1 Heading', variant='h1') 26 | cat.typography(text='H2 Heading', variant='h2') 27 | cat.typography(text='H3 Heading', variant='h3') 28 | cat.typography(text='H4 Heading', variant='h4') 29 | cat.typography(text='H5 Heading', variant='h5') 30 | cat.typography(text='H6 Heading', variant='h6') 31 | cat.typography(text='Subtitle 1', variant='subtitle1') 32 | cat.typography(text='Subtitle 2', variant='subtitle2') 33 | cat.typography(text='Body 1', variant='body1') 34 | cat.typography(text='Body 2', variant='body2') 35 | 36 | cat.divider() 37 | 38 | # card 39 | with cat.div(tailwind='flex w-full justify-center'): 40 | cat.typography(text='Card', variant='h1') 41 | # Card 1 42 | with cat.div(tailwind='flex w-full justify-center mt-8'): 43 | cat.card(header="Feline Facts", sub_header="Explore the fascinating world of cats.", tailwind='mr-0 lg:mt-0 lg:mr-8') 44 | 45 | # Card 2 46 | cat.card(img_src='./images/cat_card2.png', header="Purr-fect Companions", 47 | sub_header="Discover why cats make such great pets.", tailwind='mr-0 mt-8 lg:mt-0 lg:mr-8') 48 | 49 | # Card 3 50 | cat.card(img_src='./images/cat_card3.png', header="Cats of the World", 51 | sub_header="Learn about the various breeds of cats.", tailwind='mr-0 mt-8 lg:mt-0 lg:mr-8') 52 | 53 | cat.divider() 54 | 55 | # notification 56 | with cat.div(tailwind='flex w-full justify-center'): 57 | cat.typography(text='Notification', variant='h1') 58 | with cat.div(tailwind='flex w-full justify-center mt-8'): 59 | cat.notification() # header and sub_header param possible (string) 60 | cat.notification(header="Cat Food Recall", 61 | sub_header="Brand X has issued a recall for their tuna flavored cat food.", tailwind='mr-8 ml-8') 62 | cat.notification(header="Vet Appointment Reminder", 63 | sub_header="Don't forget your cat's annual check-up appointment next week.", tailwind='mt-8') 64 | 65 | cat.divider() 66 | 67 | # chip 68 | with cat.div(tailwind='flex w-full justify-center'): 69 | cat.typography(text='Chip', variant='h1') 70 | with cat.div(tailwind='flex w-full justify-center mt-4'): 71 | cat.typography(text="Chips are compact elements that represent an input, attribute, or action.", 72 | variant='body1') 73 | with cat.div(tailwind='flex w-full justify-center mt-8'): 74 | cat.chip(variant='outlined') 75 | cat.chip(variant='filled', css='margin-left: 64px;') 76 | 77 | cat.divider() 78 | 79 | 80 | # rating 81 | with cat.div(tailwind='flex w-full justify-center'): 82 | cat.typography(text='Rating', variant='h1') 83 | with cat.div(tailwind='flex w-full justify-center mt-4'): 84 | cat.typography(text="Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.", 85 | variant='body1') 86 | 87 | with cat.div(tailwind='flex w-full justify-center mt-8'): 88 | cat.rating() 89 | 90 | cat.divider() 91 | 92 | # alerts 93 | with cat.div(tailwind='flex w-full justify-center'): 94 | cat.typography(text='Alerts', variant='h1') 95 | 96 | with cat.div(tailwind='flex w-full justify-center mt-4'): 97 | cat.typography(text="An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.", 98 | variant='body1') 99 | with cat.div(tailwind='flex flex-wrap w-full justify-between mt-8'): 100 | cat.alert(type='info', message='This is an info alert — check it out!', css="border-radius: 100px;") 101 | cat.alert(type='warning', message='This is a warning alert — check it out!', css="border-radius: 100px;") 102 | cat.alert(type='error', message='Please enter correct e-mail', css="border-radius: 100px;") 103 | cat.alert(type='success', css="border-radius: 100px;", tailwind='mr-8') # css and tailwind works 104 | 105 | cat.divider() 106 | 107 | # icons 108 | with cat.div(tailwind='flex w-full justify-center'): 109 | cat.typography(text='Icons', variant='h1') 110 | 111 | with cat.div(tailwind='flex w-full justify-center mt-4'): 112 | cat.typography(text='To incorporate icons, invoke the "icon" method, specifying the name of the icon as well as' 113 | 'your preferred style variant. The icon names correspond to those found on the Heroicons' 114 | 'website (https://heroicons.com/).', variant='body1') 115 | 116 | """cat.typography(text='If no variant is specified, the default is "outlined".', variant='body1') 117 | cat.typography(text='Example:', variant='body2') 118 | cat.typography(text="cat.icon('share', variant='filled')", variant='body2') 119 | cat.icon('share', variant='filled') 120 | cat.typography(text="This will create a filled 'share' icon.", variant='body2') 121 | cat.typography(text="You can also change the color of the icon.", variant='body2') 122 | cat.typography(text="Example:", variant='body2') 123 | cat.typography(text="cat.icon('share', color='red')", variant='body2') 124 | cat.icon('share', color='red') 125 | cat.typography(text="This will create a 'share' icon in red color.", variant='body2')""" 126 | 127 | with cat.div(tailwind='flex justify-between w-full mt-16'): 128 | cat.icon('share') 129 | cat.icon('like') 130 | cat.icon('star') 131 | cat.icon('settings') 132 | cat.icon('hamburger') 133 | cat.icon('refresh') 134 | cat.icon('bell') 135 | cat.icon('chevron-left') 136 | cat.icon('chevron-right') 137 | 138 | with cat.div(tailwind='flex justify-between w-full mt-16 mb-16'): 139 | cat.icon('cloud') 140 | cat.icon('minus-circle') 141 | cat.icon('ellipsis') 142 | cat.icon('envelope') 143 | cat.icon('envelope-open') 144 | cat.icon('trash') 145 | cat.icon('map') 146 | cat.icon('map-pin') 147 | cat.icon('hand-thumb-up') 148 | 149 | with cat.div(tailwind='flex justify-between w-full mt-16 mb-16'): 150 | cat.icon('arrow-down') 151 | cat.icon('arrow-left') 152 | cat.icon('arrow-right') 153 | cat.icon('arrow-up') 154 | cat.icon('arrow-up-left') 155 | cat.icon('arrow-up-right') 156 | cat.icon('arrow-down-left') 157 | cat.icon('arrow-down-right') 158 | 159 | 160 | cat.divider() 161 | 162 | with cat.div(tailwind='flex w-full justify-center mt-8'): 163 | cat.review_card(reviewer_name='Whiskers', review_date='July 7, 2023', 164 | review_text='Purrfect product! My human got this for me and I absolutely love it. I give it five paws!', 165 | review_rating=5, reviewer_avatar="./images/cat0.png") 166 | 167 | cat.bar_chart() 168 | 169 | cat.line_chart(css='margin-top: 200px; margin-bottom: 200px; width: 80%;', tailwind='ml-16') 170 | 171 | cat.avatar(css='width: 64px; height: 64px;') 172 | 173 | 174 | cat.tweet_card(profile_src='./images/cat0.png') 175 | 176 | 177 | if __name__ in {'__main__', '__mp_main__'}: 178 | """ 179 | Entry point for the script. 180 | 181 | This condition checks if the script is being run directly or imported as a module. 182 | If run directly, it calls the main function to initiate the UI. 183 | """ 184 | main() 185 | --------------------------------------------------------------------------------