From bc6f257552d98011dc90e52cd0a13a00b2baeb38 Mon Sep 17 00:00:00 2001 From: Andrea Giancarli Date: Fri, 24 May 2024 15:12:02 +0200 Subject: [PATCH] Carousel, Hero, TextArea - AppNavigation buttons badge - Material 3 update - Refactoring --- README.md | 2 +- .../inps/android/ExampleInstrumentedTest.kt | 27 - .../main/java/it/inps/sirio/theme/Color.kt | 1115 +++++++++++------ .../main/java/it/inps/sirio/theme/Shape.kt | 4 +- .../src/main/java/it/inps/sirio/theme/Size.kt | 105 +- .../main/java/it/inps/sirio/theme/Theme.kt | 434 ++++--- .../src/main/java/it/inps/sirio/theme/Type.kt | 114 +- .../it/inps/sirio/ui/accordion/Accordion.kt | 4 +- .../sirio/ui/accordion/AccordionCommon.kt | 30 +- .../inps/sirio/ui/accordion/AccordionGroup.kt | 12 +- .../sirio/ui/appnavigation/AppNavigation.kt | 17 +- .../ui/appnavigation/AppNavigationBig.kt | 4 +- .../ui/appnavigation/AppNavigationCommon.kt | 36 +- .../ui/appnavigation/AppNavigationItemData.kt | 4 +- .../ui/appnavigation/AppNavigationLogo.kt | 11 +- .../appnavigation/AppNavigationLongTitle.kt | 7 +- .../ui/appnavigation/AppNavigationSearch.kt | 22 +- .../appnavigation/AppNavigationSelection.kt | 3 +- .../java/it/inps/sirio/ui/badge/SirioBadge.kt | 18 + .../inps/sirio/ui/badge/SirioBadgeCommon.kt | 19 +- .../inps/sirio/ui/button/SirioButtonCommon.kt | 166 +-- .../it/inps/sirio/ui/card/SirioCardCommon.kt | 60 +- .../inps/sirio/ui/carousel/SirioCarousel.kt | 56 + .../sirio/ui/carousel/SirioCarouselCommon.kt | 225 ++++ .../inps/sirio/ui/checkbox/SirioCheckbox.kt | 4 +- .../sirio/ui/checkbox/SirioCheckboxCommon.kt | 208 +-- .../java/it/inps/sirio/ui/chip/ChipCommon.kt | 6 +- .../inps/sirio/ui/dialog/SirioDialogCommon.kt | 14 +- .../java/it/inps/sirio/ui/fab/FabCommon.kt | 32 +- .../sirio/ui/fileupload/FileUploadCommon.kt | 35 +- .../java/it/inps/sirio/ui/hero/SirioHero.kt | 71 ++ .../it/inps/sirio/ui/hero/SirioHeroCommon.kt | 197 +++ .../notification/NotificationInlineCommon.kt | 19 +- .../ui/notification/NotificationToast.kt | 6 +- .../sirio/ui/pagination/PaginationCommon.kt | 10 +- .../ui/radiobutton/SirioRadioButtonCommon.kt | 76 +- .../ui/searchbar/SirioSearchBarCommon.kt | 37 +- .../inps/sirio/ui/slider/SirioSliderCommon.kt | 35 +- .../java/it/inps/sirio/ui/tabbar/TabBar.kt | 268 +--- .../it/inps/sirio/ui/tabs/SirioTabCommon.kt | 26 +- .../sirio/ui/tag/{SmallTag.kt => SirioTag.kt} | 18 +- .../tag/{TagCommon.kt => SirioTagCommon.kt} | 38 +- .../it/inps/sirio/ui/text/SirioTextCommon.kt | 4 +- .../inps/sirio/ui/textarea/SirioTextArea.kt | 126 ++ .../sirio/ui/textarea/SirioTextAreaCommon.kt | 467 +++++++ .../ui/textfield/SirioTextFieldCommon.kt | 2 +- .../inps/sirio/ui/toggle/SirioToggleCommon.kt | 96 +- .../it/inps/sirio/utils/BorderModifier.kt | 123 ++ design/src/main/res/values/themes.xml | 4 - gradle.properties | 2 +- gradle/libs.versions.toml | 22 +- gradle/wrapper/gradle-wrapper.properties | 4 +- sample/build.gradle.kts | 4 +- .../it/inps/design/ExampleInstrumentedTest.kt | 24 - sample/src/main/AndroidManifest.xml | 33 +- .../main/java/it/inps/design/MainActivity.kt | 74 +- .../design/accordion/AccordionActivity.kt | 62 +- .../appnavigation/AppNavigationActivity.kt | 57 +- .../it/inps/design/button/ButtonActivity.kt | 53 +- .../java/it/inps/design/card/CardActivity.kt | 27 +- .../inps/design/carousel/CarouselActivity.kt | 145 +++ .../inps/design/checkbox/CheckboxActivity.kt | 18 +- .../java/it/inps/design/chip/ChipActivity.kt | 40 +- .../it/inps/design/dialog/DialogActivity.kt | 59 +- .../java/it/inps/design/fab/FabActivity.kt | 35 +- .../design/fileupload/FileUploadActivity.kt | 24 +- .../java/it/inps/design/hero/HeroActivity.kt | 94 ++ .../notification/NotificationActivity.kt | 51 +- .../NotificationInlineActivity.kt | 11 +- .../notification/NotificationToastActivity.kt | 11 +- .../design/pagination/PaginationActivity.kt | 23 +- .../design/progressbar/ProgressBarActivity.kt | 26 +- .../design/radiobutton/RadioButtonActivity.kt | 51 +- .../design/searchbar/SearchBarActivity.kt | 26 +- .../it/inps/design/slider/SliderActivity.kt | 23 +- .../it/inps/design/tabbar/TabBarActivity.kt | 25 +- .../main/java/it/inps/design/tabbar/Tabs.kt | 2 +- .../java/it/inps/design/tabs/TabActivity.kt | 43 +- .../java/it/inps/design/tag/TagActivity.kt | 40 +- .../inps/design/textarea/TextAreaActivity.kt | 123 ++ .../design/textfield/TextFieldActivity.kt | 26 +- .../it/inps/design/toggle/ToggleActivity.kt | 24 +- .../java/it/inps/design/ui/DemoActivity.kt | 6 +- .../java/it/inps/design/ui/DemoMenuItem.kt | 4 +- .../main/java/it/inps/design/ui/DemoTabs.kt | 2 +- sample/src/main/res/values/themes.xml | 3 - .../java/it/inps/design/ExampleUnitTest.kt | 17 - 87 files changed, 4065 insertions(+), 1666 deletions(-) delete mode 100644 design/src/androidTest/java/design/inps/android/ExampleInstrumentedTest.kt create mode 100644 design/src/main/java/it/inps/sirio/ui/badge/SirioBadge.kt create mode 100644 design/src/main/java/it/inps/sirio/ui/carousel/SirioCarousel.kt create mode 100644 design/src/main/java/it/inps/sirio/ui/carousel/SirioCarouselCommon.kt create mode 100644 design/src/main/java/it/inps/sirio/ui/hero/SirioHero.kt create mode 100644 design/src/main/java/it/inps/sirio/ui/hero/SirioHeroCommon.kt rename design/src/main/java/it/inps/sirio/ui/tag/{SmallTag.kt => SirioTag.kt} (74%) rename design/src/main/java/it/inps/sirio/ui/tag/{TagCommon.kt => SirioTagCommon.kt} (71%) create mode 100644 design/src/main/java/it/inps/sirio/ui/textarea/SirioTextArea.kt create mode 100644 design/src/main/java/it/inps/sirio/ui/textarea/SirioTextAreaCommon.kt create mode 100644 design/src/main/java/it/inps/sirio/utils/BorderModifier.kt delete mode 100644 sample/src/androidTest/java/it/inps/design/ExampleInstrumentedTest.kt create mode 100644 sample/src/main/java/it/inps/design/carousel/CarouselActivity.kt create mode 100644 sample/src/main/java/it/inps/design/hero/HeroActivity.kt create mode 100644 sample/src/main/java/it/inps/design/textarea/TextAreaActivity.kt delete mode 100644 sample/src/test/java/it/inps/design/ExampleUnitTest.kt diff --git a/README.md b/README.md index 5b48815..91e9759 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ repositories { } } dependencies { - implementation 'it.inps.sirio:library:7.0.2' + implementation 'it.inps.sirio:library:8.0.0' } ``` 2. Add following repository in your gradle file (es. settings.gradle) diff --git a/design/src/androidTest/java/design/inps/android/ExampleInstrumentedTest.kt b/design/src/androidTest/java/design/inps/android/ExampleInstrumentedTest.kt deleted file mode 100644 index d804896..0000000 --- a/design/src/androidTest/java/design/inps/android/ExampleInstrumentedTest.kt +++ /dev/null @@ -1,27 +0,0 @@ -package design.inps.android - -/* -import androidx.test.platform.app.InstrumentationRegistry -import androidx.test.ext.junit.runners.AndroidJUnit4 - -import org.junit.Test -import org.junit.runner.RunWith - -import org.junit.Assert.* - -*/ -/** - * Instrumented test, which will execute on an Android device. - * - * See [testing documentation](http://d.android.com/tools/testing). - *//* - -@RunWith(AndroidJUnit4::class) -class ExampleInstrumentedTest { - @Test - fun useAppContext() { - // Context of the app under test. - val appContext = InstrumentationRegistry.getInstrumentation().targetContext - assertEquals("design.inps.android", appContext.packageName) - } -}*/ diff --git a/design/src/main/java/it/inps/sirio/theme/Color.kt b/design/src/main/java/it/inps/sirio/theme/Color.kt index 2c2bfcd..f066987 100644 --- a/design/src/main/java/it/inps/sirio/theme/Color.kt +++ b/design/src/main/java/it/inps/sirio/theme/Color.kt @@ -18,40 +18,20 @@ import it.inps.sirio.ui.badge.SirioBadgeColors import it.inps.sirio.ui.button.SirioButtonColors import it.inps.sirio.ui.card.SirioCardColors import it.inps.sirio.ui.card.SirioCardsColors +import it.inps.sirio.ui.carousel.SirioCarouselColors +import it.inps.sirio.ui.carousel.SirioCarouselIndicatorColors +import it.inps.sirio.ui.checkbox.SirioCheckboxColors import it.inps.sirio.ui.dialog.SirioDialogColors +import it.inps.sirio.ui.hero.SirioHeroColors import it.inps.sirio.ui.pagination.SirioPaginationColors +import it.inps.sirio.ui.radiobutton.SirioRadioButtonColors import it.inps.sirio.ui.searchbar.SirioSearchBarColors import it.inps.sirio.ui.tabs.SirioTabsColors import it.inps.sirio.ui.tag.SirioTagColors import it.inps.sirio.ui.tag.SirioTagsColors +import it.inps.sirio.ui.textarea.SirioTextAreaColors import it.inps.sirio.ui.textfield.SirioTextFieldColors - -private val tagLightColors = SirioTagsColors( - gray = SirioTagColors( - background = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - blue = SirioTagColors( - background = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - red = SirioTagColors( - background = StyleDictionaryColor.colorAliasInteractiveAlertDefault, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - orange = SirioTagColors( - background = StyleDictionaryColor.colorGlobalSemanticWarning80, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - green = SirioTagColors( - background = StyleDictionaryColor.colorGlobalSemanticSuccess100, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - white = SirioTagColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - text = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - ), -) +import it.inps.sirio.ui.toggle.SirioToggleColors private val buttonsLightColors = ButtonColors( focusExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, @@ -133,28 +113,35 @@ private val buttonsLightColors = ButtonColors( ), ) +private val tagLightColors = SirioTagsColors( + gray = SirioTagColors( + background = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + blue = SirioTagColors( + background = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + red = SirioTagColors( + background = StyleDictionaryColor.colorAliasInteractiveAlertDefault, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + orange = SirioTagColors( + background = StyleDictionaryColor.colorGlobalSemanticWarning80, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + green = SirioTagColors( + background = StyleDictionaryColor.colorGlobalSemanticSuccess100, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + white = SirioTagColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + text = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + ), +) + internal val LightColorPalette = SirioColors( brand = StyleDictionaryColor.colorGlobalPrimary100, - fabDefaultBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - fabHoverBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - fabFocusBackground = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - fabBorderFocus = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - fabPressedBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - fabContent = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - appNavigationBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - appNavigationIcon = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - appNavigationIconPressed = StyleDictionaryColor.colorAliasOverlay15Secondary100, - appNavigationText = StyleDictionaryColor.colorAliasTextColorPrimaryDark110, - appNavigationUsernameBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight50, - appNavigationUsernameText = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - appNavigationSearchBackground1 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - appNavigationSearchBackground2 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - appNavigationSearchText = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - appNavigationSearchIcon = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - tabBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - tabBarContent = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - tabBarActive = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, - tag = tagLightColors, accordion = SirioAccordionColors( activedBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, activedBorder = Color.Transparent, @@ -179,83 +166,120 @@ internal val LightColorPalette = SirioColors( pressed = Color.Transparent, ), ), + appNavigationBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + appNavigationIcon = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + appNavigationIconPressed = StyleDictionaryColor.colorAliasOverlay15Secondary100, + appNavigationSearchBackground1 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + appNavigationSearchBackground2 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + appNavigationSearchIcon = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + appNavigationSearchText = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + appNavigationText = StyleDictionaryColor.colorAliasTextColorPrimaryDark110, + appNavigationUsernameBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight50, + appNavigationUsernameText = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + badge = SirioBadgeColors( + background = StyleDictionaryColor.colorGlobalSemanticAlert100, + border = StyleDictionaryColor.colorGlobalPrimary000 + ), + buttons = buttonsLightColors, + card = SirioCardsColors( + editorial = SirioCardColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + category = tagLightColors.gray, + icon = StyleDictionaryColor.colorGlobalSecondary100, + date = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + title = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + signature = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + button = buttonsLightColors.tertiary, + iconButton = buttonsLightColors.ghost, + ), + process = SirioCardColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + category = tagLightColors.gray, + icon = StyleDictionaryColor.colorGlobalSecondary100, + date = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + title = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + signature = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + button = buttonsLightColors.tertiary, + iconButton = buttonsLightColors.ghost, + ), + ), + carousel = SirioCarouselColors( + backgroundLight = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundMedium = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + indicator = SirioCarouselIndicatorColors( + dotUnselected = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + dotSelected = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + ) + ), + checkbox = SirioCheckboxColors( + background = SirioColorState.all( + StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + StyleDictionaryColor.colorAliasBackgroundColorDisabled + ), + borderFocusExtra = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + border = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + ), + check = SirioColorState.all(StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault), + text = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, + ), + ), + chipButtonBorder = StyleDictionaryColor.colorGlobalMidPrimary70, + chipContent = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, chipDefaultBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - chipHoverBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + chipDefaultButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + chipDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + chipDisabledButtonBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + chipDisabledContent = StyleDictionaryColor.colorAliasTextColorDisabled, + chipDisactiveBackground = Color.Transparent, chipFocusBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + chipFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + chipFocusButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + chipHoverBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + chipHoverButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, chipPressedBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - chipDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + chipPressedButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, chipWithCloseDefaultBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - chipWithCloseHoverBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, + chipWithCloseDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, chipWithCloseFocusBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, + chipWithCloseHoverBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, chipWithClosePressedBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryPressed, - chipWithCloseDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - chipDefaultButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - chipHoverButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - chipFocusButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - chipPressedButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - chipDisabledButtonBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - chipButtonBorder = StyleDictionaryColor.colorGlobalMidPrimary70, - chipFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - chipContent = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - chipDisabledContent = StyleDictionaryColor.colorAliasTextColorDisabled, - chipDisactiveBackground = Color.Transparent, - checkboxBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - checkboxDefaultContent = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - checkboxHoverContent = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - checkboxFocusContent = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, - checkboxFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - checkboxPressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - checkboxPressedText = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, - checkboxDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - checkboxDisabledContent = StyleDictionaryColor.colorAliasTextColorDisabled, - radioBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - radioDefault = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - radioHover = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, - radioFocus = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, - radioFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - radioPressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, - radioDisabled = StyleDictionaryColor.colorAliasTextColorDisabled, - radioDisabledBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - toggleBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - toggleDefaultOff = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, - toggleDefaultOn = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - toggleHoverOff = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, - toggleHoverOn = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - toggleFocusOff = StyleDictionaryColor.colorAliasInteractiveSecondaryFocus, - toggleFocusOn = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - toggleFocusExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - toggleDisabled = StyleDictionaryColor.colorAliasTextColorDisabled, - toggleDisabledBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderThumb = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - sliderPressedThumb = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, - sliderDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderInactive = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderActive = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - sliderFocusActive = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - sliderPressedActive = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, - sliderTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - sliderText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - sliderNumbers = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - sliderDefaultTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - sliderDisabledTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderDefaultTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, - sliderDefaultTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, - sliderHoverTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, - sliderHoverTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, - sliderFocusTextFieldExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - sliderFocusTextFieldBorder = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - sliderFocusTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, - sliderPressedTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, - sliderPressedTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, - sliderDisabledTextFieldBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderDisabledTextFieldText = StyleDictionaryColor.colorAliasTextColorDisabled, - progressBarLabel = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - progressBarNumber = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - progressBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - progressBarGradient = StyleDictionaryColor.colorSpecificProgressbarBackgroundColor, - buttons = buttonsLightColors, - fileUploadTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + dialog = SirioDialogColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + semanticDefault = StyleDictionaryColor.colorGlobalSemanticInfo100, + semanticAlert = StyleDictionaryColor.colorGlobalSemanticAlert100, + semanticWarning = StyleDictionaryColor.colorGlobalSemanticWarning100, + title = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + ), + fabBorderFocus = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + fabContent = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + fabDefaultBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + fabFocusBackground = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + fabHoverBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + fabPressedBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, fileUploadText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + fileUploadTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + hero = SirioHeroColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + title = StyleDictionaryColor.colorGlobalDarkPrimary115, + subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + borderBottom = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, + ), notificationColors = NotificationColors( background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark120, title = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, @@ -267,32 +291,143 @@ internal val LightColorPalette = SirioColors( warning = StyleDictionaryColor.colorGlobalSemanticWarning100, success = StyleDictionaryColor.colorGlobalSemanticSuccess100, ), - textField = SirioTextFieldColors( - background = SirioColorState.all(Color.Transparent), - extraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + pagination = SirioPaginationColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + tile = SirioColorState( + default = Color.Transparent, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = Color.Transparent, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + ), + tileBorder = SirioColorState( + default = Color.Transparent, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + ), + number = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + hovered = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + pressed = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + ) + ), + progressBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + progressBarGradient = StyleDictionaryColor.colorSpecificProgressbarBackgroundColor, + progressBarLabel = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + progressBarNumber = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + radio = SirioRadioButtonColors( + background = SirioColorState.all( + StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + StyleDictionaryColor.colorAliasBackgroundColorDisabled + ), + borderFocusExtra = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, border = SirioColorState( default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, focused = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, - alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, - warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, - success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, - info = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, ), - dropdown = SirioColorState.all(StyleDictionaryColor.colorAliasInteractiveSecondaryDefault), - optionBackground = SirioColorState( - default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - focused = StyleDictionaryColor.colorSpecificOptionBackgroundColorFocus, - hovered = StyleDictionaryColor.colorSpecificOptionBackgroundColorHover, - pressed = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, + dot = SirioColorState.all( + StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + StyleDictionaryColor.colorAliasTextColorDisabled, ), - optionText = SirioColorState( - default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, + text = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, disabled = StyleDictionaryColor.colorAliasTextColorDisabled, - focused = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, + ), + ), + searchBar = SirioSearchBarColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + ), + sliderActive = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + sliderDefaultTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + sliderDefaultTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + sliderDefaultTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, + sliderDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderDisabledTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderDisabledTextFieldBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderDisabledTextFieldText = StyleDictionaryColor.colorAliasTextColorDisabled, + sliderFocusActive = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + sliderFocusTextFieldBorder = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + sliderFocusTextFieldExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + sliderFocusTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, + sliderHoverTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + sliderHoverTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, + sliderInactive = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderNumbers = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + sliderPressedActive = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, + sliderPressedTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + sliderPressedTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, + sliderPressedThumb = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, + sliderText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + sliderThumb = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + sliderTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + tabBarActive = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, + tabBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + tabBarContent = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + tabs = SirioTabsColors( + backgroundBottomSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundTopSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + backgroundSelected = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundBottomSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundTopSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + text = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + ), + icon = SirioColorState( + default = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + pressed = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + ), + selection = SirioColorState( + default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + ), + ), + tag = tagLightColors, + textArea = SirioTextAreaColors( + background = SirioColorState.all(Color.Transparent), + extraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + border = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + ), + dropdown = SirioColorState.all(StyleDictionaryColor.colorAliasInteractiveSecondaryDefault), + optionBackground = SirioColorState( + default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorSpecificOptionBackgroundColorFocus, + hovered = StyleDictionaryColor.colorSpecificOptionBackgroundColorHover, + pressed = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, + ), + optionText = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, hovered = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, pressed = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, ), @@ -352,129 +487,115 @@ internal val LightColorPalette = SirioColors( info = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, ), ), - pagination = SirioPaginationColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - tile = SirioColorState( - default = Color.Transparent, + textField = SirioTextFieldColors( + background = SirioColorState.all(Color.Transparent), + extraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + border = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - focused = Color.Transparent, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + focused = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, ), - tileBorder = SirioColorState( - default = Color.Transparent, + dropdown = SirioColorState.all(StyleDictionaryColor.colorAliasInteractiveSecondaryDefault), + optionBackground = SirioColorState( + default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - focused = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + focused = StyleDictionaryColor.colorSpecificOptionBackgroundColorFocus, + hovered = StyleDictionaryColor.colorSpecificOptionBackgroundColorHover, + pressed = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, ), - number = SirioColorState( - default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + optionText = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, disabled = StyleDictionaryColor.colorAliasTextColorDisabled, - focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - hovered = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - pressed = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - ) - ), - tabs = SirioTabsColors( - backgroundBottomSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - backgroundTopSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - backgroundSelected = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - backgroundBottomSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - backgroundTopSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - text = SirioColorState( + focused = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + hovered = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + pressed = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + label = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + ), + icon = SirioColorState( default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, ), - icon = SirioColorState( - default = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, + helperText = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - pressed = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, + pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + alert = StyleDictionaryColor.colorGlobalSemanticAlert100, + warning = StyleDictionaryColor.colorGlobalSemanticWarning100, + success = StyleDictionaryColor.colorGlobalSemanticSuccess100, + info = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + ), + placeholder = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, ), - selection = SirioColorState( - default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - pressed = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + text = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, ), ), - searchBar = SirioSearchBarColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - ), - dialog = SirioDialogColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - semanticDefault = StyleDictionaryColor.colorGlobalSemanticInfo100, - semanticAlert = StyleDictionaryColor.colorGlobalSemanticAlert100, - semanticWarning = StyleDictionaryColor.colorGlobalSemanticWarning100, - title = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - ), - card = SirioCardsColors( - editorial = SirioCardColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - category = tagLightColors.gray, - icon = StyleDictionaryColor.colorGlobalSecondary100, - date = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - title = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - signature = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - button = buttonsLightColors.tertiary, - iconButton = buttonsLightColors.ghost, + toggle = SirioToggleColors( + background = SirioColorState.all( + StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + StyleDictionaryColor.colorAliasBackgroundColorDisabled, ), - process = SirioCardColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - category = tagLightColors.gray, - icon = StyleDictionaryColor.colorGlobalSecondary100, - date = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - title = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - signature = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - button = buttonsLightColors.tertiary, - iconButton = buttonsLightColors.ghost, + borderFocusExtra = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + off = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractiveSecondaryFocus, + hovered = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, + pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryFocus, + ), + on = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, ), - ), - badge = SirioBadgeColors( - background = StyleDictionaryColor.colorGlobalSemanticAlert100, - border = StyleDictionaryColor.colorGlobalPrimary000 ), isDark = false, ) -private val tagDarkColors = SirioTagsColors( - gray = SirioTagColors( - background = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - blue = SirioTagColors( - background = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - red = SirioTagColors( - background = StyleDictionaryColor.colorAliasInteractiveAlertDefault, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - orange = SirioTagColors( - background = StyleDictionaryColor.colorGlobalSemanticWarning100, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - green = SirioTagColors( - background = StyleDictionaryColor.colorGlobalSemanticSuccess100, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - ), - white = SirioTagColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - text = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - ), -) - private val buttonsDarkColors = ButtonColors( focusExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, primary = SirioButtonColors( @@ -555,28 +676,35 @@ private val buttonsDarkColors = ButtonColors( ), ) +private val tagDarkColors = SirioTagsColors( + gray = SirioTagColors( + background = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + blue = SirioTagColors( + background = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + red = SirioTagColors( + background = StyleDictionaryColor.colorAliasInteractiveAlertDefault, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + orange = SirioTagColors( + background = StyleDictionaryColor.colorGlobalSemanticWarning100, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + green = SirioTagColors( + background = StyleDictionaryColor.colorGlobalSemanticSuccess100, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + white = SirioTagColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + text = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + ), +) + internal val DarkColorPalette = SirioColors( brand = StyleDictionaryColor.colorGlobalPrimary000, - fabDefaultBackground = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, - fabHoverBackground = StyleDictionaryColor.colorAliasInteractiveAccentHover, - fabFocusBackground = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, - fabBorderFocus = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - fabPressedBackground = StyleDictionaryColor.colorAliasInteractiveAccentDefault, - fabContent = StyleDictionaryColor.colorAliasTextColorPrimaryDark110, - appNavigationBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark120, - appNavigationIcon = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, - appNavigationIconPressed = StyleDictionaryColor.colorAliasOverlay25Primary000, - appNavigationText = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, - appNavigationUsernameBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark115, - appNavigationUsernameText = StyleDictionaryColor.colorAliasInteractivePrimary000Default, - appNavigationSearchBackground1 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - appNavigationSearchBackground2 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - appNavigationSearchText = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - appNavigationSearchIcon = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - tabBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - tabBarContent = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, - tabBarActive = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, - tag = tagDarkColors, accordion = SirioAccordionColors( activedBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, activedBorder = Color.Transparent, @@ -601,95 +729,243 @@ internal val DarkColorPalette = SirioColors( pressed = Color.Transparent, ), ), - chipDefaultBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - chipHoverBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - chipFocusBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - chipPressedBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - chipDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - chipWithCloseDefaultBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - chipWithCloseHoverBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, - chipWithCloseFocusBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, - chipWithClosePressedBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryPressed, - chipWithCloseDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - chipDefaultButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - chipHoverButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - chipFocusButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - chipPressedButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - chipDisabledButtonBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - chipButtonBorder = StyleDictionaryColor.colorGlobalMidPrimary70, - chipFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - chipContent = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - chipDisabledContent = StyleDictionaryColor.colorAliasTextColorDisabled, - chipDisactiveBackground = Color.Transparent, - checkboxBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - checkboxDefaultContent = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - checkboxHoverContent = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - checkboxFocusContent = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, - checkboxFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - checkboxPressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, - checkboxPressedText = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, - checkboxDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - checkboxDisabledContent = StyleDictionaryColor.colorAliasTextColorDisabled, - radioBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - radioDefault = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - radioHover = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, - radioFocus = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, - radioFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - radioPressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, - radioDisabled = StyleDictionaryColor.colorAliasTextColorDisabled, - radioDisabledBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - toggleBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - toggleDefaultOff = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, - toggleDefaultOn = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - toggleHoverOff = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, - toggleHoverOn = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - toggleFocusOff = StyleDictionaryColor.colorAliasInteractiveSecondaryFocus, - toggleFocusOn = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - toggleFocusExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - toggleDisabled = StyleDictionaryColor.colorAliasTextColorDisabled, - toggleDisabledBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderThumb = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - sliderPressedThumb = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, - sliderDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderInactive = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + appNavigationBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark120, + appNavigationIcon = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, + appNavigationIconPressed = StyleDictionaryColor.colorAliasOverlay25Primary000, + appNavigationSearchBackground1 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + appNavigationSearchBackground2 = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + appNavigationSearchIcon = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + appNavigationSearchText = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + appNavigationText = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, + appNavigationUsernameBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark115, + appNavigationUsernameText = StyleDictionaryColor.colorAliasInteractivePrimary000Default, + badge = SirioBadgeColors( + background = StyleDictionaryColor.colorGlobalSemanticAlert100, + border = StyleDictionaryColor.colorGlobalPrimary000 + ), + buttons = buttonsDarkColors, + card = SirioCardsColors( + editorial = SirioCardColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + category = tagDarkColors.gray, + icon = StyleDictionaryColor.colorGlobalSecondary100, + date = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + title = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + signature = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + button = buttonsDarkColors.tertiary, + iconButton = buttonsDarkColors.ghost, + ), + process = SirioCardColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark115, + category = tagDarkColors.white, + icon = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + date = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + title = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + subtitle = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + signature = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + button = buttonsDarkColors.tertiary, + iconButton = buttonsDarkColors.tertiary.copy(border = SirioColorState.all(Color.Transparent)), + ), + ), + carousel = SirioCarouselColors( + backgroundLight = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundMedium = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + indicator = SirioCarouselIndicatorColors( + dotUnselected = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + dotSelected = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + ) + ), + checkbox = SirioCheckboxColors( + background = SirioColorState.all( + StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + StyleDictionaryColor.colorAliasBackgroundColorDisabled + ), + borderFocusExtra = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + border = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + ), + check = SirioColorState.all(StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault), + text = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, + ), + ), + chipButtonBorder = StyleDictionaryColor.colorGlobalMidPrimary70, + chipContent = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + chipDefaultBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + chipDefaultButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + chipDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + chipDisabledButtonBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + chipDisabledContent = StyleDictionaryColor.colorAliasTextColorDisabled, + chipDisactiveBackground = Color.Transparent, + chipFocusBackground = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + chipFocusBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + chipFocusButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + chipHoverBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + chipHoverButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + chipPressedBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + chipPressedButtonBackground = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + chipWithCloseDefaultBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + chipWithCloseDisabledBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + chipWithCloseFocusBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, + chipWithCloseHoverBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, + chipWithClosePressedBackground = StyleDictionaryColor.colorAliasInteractiveSecondaryPressed, + dialog = SirioDialogColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + semanticDefault = StyleDictionaryColor.colorGlobalSemanticInfo100, + semanticAlert = StyleDictionaryColor.colorGlobalSemanticAlert100, + semanticWarning = StyleDictionaryColor.colorGlobalSemanticWarning100, + title = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + ), + fabBorderFocus = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + fabContent = StyleDictionaryColor.colorAliasTextColorPrimaryDark110, + fabDefaultBackground = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, + fabFocusBackground = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, + fabHoverBackground = StyleDictionaryColor.colorAliasInteractiveAccentHover, + fabPressedBackground = StyleDictionaryColor.colorAliasInteractiveAccentDefault, + fileUploadText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + fileUploadTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + hero = SirioHeroColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + title = StyleDictionaryColor.colorGlobalDarkPrimary115, + subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + borderBottom = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, + ), + notificationColors = NotificationColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark120, + title = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + icon = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + close = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + alert = StyleDictionaryColor.colorGlobalSemanticAlert100, + info = StyleDictionaryColor.colorGlobalSemanticInfo100, + warning = StyleDictionaryColor.colorGlobalSemanticWarning100, + success = StyleDictionaryColor.colorGlobalSemanticSuccess100, + ), + pagination = SirioPaginationColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + tile = SirioColorState( + default = Color.Transparent, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = Color.Transparent, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + ), + tileBorder = SirioColorState( + default = Color.Transparent, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + ), + number = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + hovered = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + pressed = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + ) + ), + progressBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + progressBarGradient = StyleDictionaryColor.colorSpecificProgressbarBackgroundColor, + progressBarLabel = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + progressBarNumber = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + radio = SirioRadioButtonColors( + background = SirioColorState.all( + StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + StyleDictionaryColor.colorAliasBackgroundColorDisabled + ), + borderFocusExtra = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + border = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + ), + dot = SirioColorState.all( + StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + StyleDictionaryColor.colorAliasTextColorDisabled, + ), + text = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, + ), + ), + searchBar = SirioSearchBarColors( + background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + ), sliderActive = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - sliderFocusActive = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - sliderPressedActive = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, - sliderTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - sliderText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - sliderNumbers = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, sliderDefaultTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - sliderDisabledTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, sliderDefaultTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, sliderDefaultTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, - sliderHoverTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, - sliderHoverTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, - sliderFocusTextFieldExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + sliderDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderDisabledTextFieldBackground = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderDisabledTextFieldBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderDisabledTextFieldText = StyleDictionaryColor.colorAliasTextColorDisabled, + sliderFocusActive = StyleDictionaryColor.colorAliasInteractiveBorderFocus, sliderFocusTextFieldBorder = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + sliderFocusTextFieldExtraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, sliderFocusTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, + sliderHoverTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + sliderHoverTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, + sliderInactive = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + sliderNumbers = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, + sliderPressedActive = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, sliderPressedTextFieldBorder = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, sliderPressedTextFieldText = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, - sliderDisabledTextFieldBorder = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - sliderDisabledTextFieldText = StyleDictionaryColor.colorAliasTextColorDisabled, - progressBarLabel = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - progressBarNumber = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - progressBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - progressBarGradient = StyleDictionaryColor.colorSpecificProgressbarBackgroundColor, - buttons = buttonsDarkColors, - fileUploadTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, - fileUploadText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - notificationColors = NotificationColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark120, - title = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - icon = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - close = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - alert = StyleDictionaryColor.colorGlobalSemanticAlert100, - info = StyleDictionaryColor.colorGlobalSemanticInfo100, - warning = StyleDictionaryColor.colorGlobalSemanticWarning100, - success = StyleDictionaryColor.colorGlobalSemanticSuccess100, + sliderPressedThumb = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, + sliderText = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + sliderThumb = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + sliderTitle = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + tabBarActive = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, + tabBarBackground = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + tabBarContent = StyleDictionaryColor.colorAliasAppInteractiveSecondaryDefault, + tabs = SirioTabsColors( + backgroundBottomSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundTopSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + backgroundSelected = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundBottomSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + backgroundTopSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + text = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + ), + icon = SirioColorState( + default = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + pressed = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + ), + selection = SirioColorState( + default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + pressed = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, + disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, + ) ), - textField = SirioTextFieldColors( + tag = tagDarkColors, + textArea = SirioTextAreaColors( background = SirioColorState.all(Color.Transparent), extraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, border = SirioColorState( @@ -774,98 +1050,111 @@ internal val DarkColorPalette = SirioColors( info = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, ), ), - pagination = SirioPaginationColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - tile = SirioColorState( - default = Color.Transparent, + textField = SirioTextFieldColors( + background = SirioColorState.all(Color.Transparent), + extraBorder = StyleDictionaryColor.colorAliasInteractiveBorderFocus, + border = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - focused = Color.Transparent, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryBorderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryBorderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, ), - tileBorder = SirioColorState( + dropdown = SirioColorState.all(StyleDictionaryColor.colorAliasInteractiveSecondaryDefault), + optionBackground = SirioColorState( default = Color.Transparent, disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - focused = StyleDictionaryColor.colorAliasInteractiveBorderFocus, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - pressed = StyleDictionaryColor.colorAliasInteractivePrimaryPressed, + focused = StyleDictionaryColor.colorSpecificOptionBackgroundColorFocus, + hovered = StyleDictionaryColor.colorSpecificOptionBackgroundColorHover, + pressed = StyleDictionaryColor.colorSpecificOptionBackgroundColorPressed, ), - number = SirioColorState( + optionText = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + hovered = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + pressed = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, + ), + label = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryLabelColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryLabelColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryLabelColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryLabelColorDefault, + ), + icon = SirioColorState( default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, disabled = StyleDictionaryColor.colorAliasTextColorDisabled, - focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, - hovered = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - pressed = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - ) - ), - tabs = SirioTabsColors( - backgroundBottomSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - backgroundTopSelection = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - backgroundSelected = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - backgroundBottomSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - backgroundTopSelectionDisabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - text = SirioColorState( + focused = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + ), + helperText = SirioColorState( default = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - focused = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + alert = StyleDictionaryColor.colorGlobalSemanticAlert100, + warning = StyleDictionaryColor.colorGlobalSemanticWarning100, + success = StyleDictionaryColor.colorGlobalSemanticSuccess100, + info = StyleDictionaryColor.colorAliasInteractiveSecondaryDefault, + ), + placeholder = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, ), - icon = SirioColorState( - default = StyleDictionaryColor.colorAliasTextColorPrimaryLight50, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - pressed = StyleDictionaryColor.colorAliasAppInteractivePrimaryActive, + text = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorFocus, + hovered = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorHover, + pressed = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorValued, + alert = StyleDictionaryColor.colorSpecificDataEntryBorderColorError, + warning = StyleDictionaryColor.colorSpecificDataEntryBorderColorWarning, + success = StyleDictionaryColor.colorSpecificDataEntryBorderColorSuccess, + info = StyleDictionaryColor.colorSpecificDataEntryPlaceholderColorDefault, ), - selection = SirioColorState( - default = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight40, - hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, - focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, - pressed = StyleDictionaryColor.colorAliasAppInteractivePrimary000Default, - disabled = StyleDictionaryColor.colorAliasBackgroundColorDisabled, - ) ), - searchBar = SirioSearchBarColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - ), - dialog = SirioDialogColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - semanticDefault = StyleDictionaryColor.colorGlobalSemanticInfo100, - semanticAlert = StyleDictionaryColor.colorGlobalSemanticAlert100, - semanticWarning = StyleDictionaryColor.colorGlobalSemanticWarning100, - title = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - ), - card = SirioCardsColors( - editorial = SirioCardColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - category = tagDarkColors.gray, - icon = StyleDictionaryColor.colorGlobalSecondary100, - date = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - title = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, - subtitle = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - text = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - signature = StyleDictionaryColor.colorAliasTextColorSecondaryDark100, - button = buttonsDarkColors.tertiary, - iconButton = buttonsDarkColors.ghost, + toggle = SirioToggleColors( + background = SirioColorState.all( + StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, + StyleDictionaryColor.colorAliasBackgroundColorDisabled, ), - process = SirioCardColors( - background = StyleDictionaryColor.colorAliasBackgroundColorPrimaryDark115, - category = tagDarkColors.white, - icon = StyleDictionaryColor.colorAliasBackgroundColorPrimaryLight0, - date = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - title = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - subtitle = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - text = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - signature = StyleDictionaryColor.colorAliasTextColorPrimaryLight0, - button = buttonsDarkColors.tertiary, - iconButton = buttonsDarkColors.tertiary.copy(border = SirioColorState.all(Color.Transparent)), + borderFocusExtra = StyleDictionaryColor.colorSpecificDataEntryBorderColorFocus, + off = SirioColorState( + default = StyleDictionaryColor.colorSpecificDataEntryBorderColorDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractiveSecondaryFocus, + hovered = StyleDictionaryColor.colorAliasInteractiveSecondaryHover, + pressed = StyleDictionaryColor.colorAliasInteractiveSecondaryFocus, + ), + on = SirioColorState( + default = StyleDictionaryColor.colorAliasInteractivePrimaryDefault, + disabled = StyleDictionaryColor.colorAliasTextColorDisabled, + focused = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, + hovered = StyleDictionaryColor.colorAliasInteractivePrimaryHover, + pressed = StyleDictionaryColor.colorAliasInteractivePrimaryFocus, ), - ), - badge = SirioBadgeColors( - background = StyleDictionaryColor.colorGlobalSemanticAlert100, - border = StyleDictionaryColor.colorGlobalPrimary000 ), isDark = true, ) @@ -920,4 +1209,4 @@ data class NotificationColors( success = Color.Unspecified, ) } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/theme/Shape.kt b/design/src/main/java/it/inps/sirio/theme/Shape.kt index b92998c..03427ee 100644 --- a/design/src/main/java/it/inps/sirio/theme/Shape.kt +++ b/design/src/main/java/it/inps/sirio/theme/Shape.kt @@ -9,11 +9,11 @@ package it.inps.sirio.theme import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Shapes +import androidx.compose.material3.Shapes import androidx.compose.ui.unit.dp internal val Shapes = Shapes( small = RoundedCornerShape(4.dp), medium = RoundedCornerShape(8.dp), large = RoundedCornerShape(16.dp) -) \ No newline at end of file +) diff --git a/design/src/main/java/it/inps/sirio/theme/Size.kt b/design/src/main/java/it/inps/sirio/theme/Size.kt index 441b137..d6d9ca0 100644 --- a/design/src/main/java/it/inps/sirio/theme/Size.kt +++ b/design/src/main/java/it/inps/sirio/theme/Size.kt @@ -11,11 +11,10 @@ package it.inps.sirio.theme import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -internal val tabBarHeight: Dp = 56.dp -internal val tabBarItemStateIndicatorHeight = 3.dp -internal val tabBarItemVerticalPadding = 8.dp -internal val tabBarItemHorizontalPadding = 12.dp -internal val tabBarItemIconSize: Dp = 24.dp +internal const val tabBarHeight = 56 +internal const val tabBarItemStateIndicatorHeight = 3 +internal const val tabBarItemVerticalPadding = 3 +internal const val tabBarItemIconSize = 24 internal val fabRegularPadding = 17.dp internal val fabSmallPadding = 9.dp @@ -36,10 +35,11 @@ internal val appNavigationSearchPadding = 6.dp internal val appNavigationSearchCornerRadius = 4.dp internal const val appNavigationTitleMaxLines = 1 internal const val appNavigationTitleLongMaxLines = 2 +internal const val appNavigationBadgePadding = 12 -internal val tagVerticalPadding = 4.dp -internal val tagHorizontalPadding = 16.dp -internal val tagElevation = 8.dp +internal const val tagHeight = 24 +internal const val tagPaddingHorizontal = 16 +internal const val tagElevation = 8 internal val accordionHeight = 64.dp internal val accordionHorizontalPadding = 16.dp @@ -66,13 +66,13 @@ internal val chipIconSize = 16.dp internal val chipFocusBorderPadding = 2.dp internal val chipFocusBorderWidth = 2.dp -internal val checkboxSize = 24.dp -internal val checkboxCheckSize = 12.dp -internal val checkboxBorderWidth = 1.dp -internal val checkboxCornerRadius = 4.dp -internal val checkboxFocusExtraBorderWidth = 1.dp -internal val checkboxFocusBorderPadding = 1.dp -internal val checkboxSafeAreaPadding = 10.dp +internal const val checkboxSize = 24 +internal const val checkboxPaddingText = 10 +internal const val checkboxCheckSize = 12 +internal const val checkboxBorderWidth = 1 +internal const val checkboxCornerRadius = 4 +internal const val checkboxFocusExtraBorderWidth = 1 +internal const val checkboxFocusBorderPadding = 1 internal val radioSafeAreaPadding = 10.dp internal val radioSize = 24.dp @@ -100,28 +100,27 @@ internal val sliderTextFieldFocusExtraBorderWidth = 1.dp internal val sliderTextFieldFocusExtraBorderPadding = 3.dp internal val sliderTextFieldCornerRadius = 4.dp -internal val buttonBorderWidth: Dp = 2.dp -internal val buttonIconSize: Dp = 16.dp -internal val buttonCornerRadius: Dp = 4.dp -internal val buttonTextIconSpacerWidth: Dp = 8.dp -internal val buttonFocusedExtraBorderWidth = 2.dp -internal val buttonFocusedBorderPadding = 3.dp -internal val buttonLargeWithoutTextHorizontalPadding = 17.dp -internal val buttonLargeWithoutTextVerticalPadding = 19.5.dp//16.dp -internal val buttonLargeWithTextHorizontalPadding = 42.dp -internal val buttonLargeWithTextVerticalPadding = 16.dp -internal val buttonMediumWithoutTextHorizontalPadding = 13.dp -internal val buttonMediumWithoutTextVerticalPadding = 16.dp//12.dp -internal val buttonMediumWithTextHorizontalPadding = 40.dp -internal val buttonMediumWithTextVerticalPadding = 12.dp -internal val buttonSmallWithoutTextHorizontalPadding = 9.dp -internal val buttonSmallWithoutTextVerticalPadding = 12.dp//8.dp -internal val buttonSmallWithTextHorizontalPadding = 36.dp -internal val buttonSmallWithTextVerticalPadding = 8.dp - -internal val fileUploadTitlePaddingBottom = 8.dp -internal val fileUploadTextPaddingBottom = 8.dp -internal val fileUploadItemsPadding = 8.dp +internal const val buttonBorderWidth = 2 +internal const val buttonIconSizeLarge = 16 +internal const val buttonIconSizeMedium = 16 +internal const val buttonIconSizeSmall = 12 +internal const val buttonCornerRadius = 4 +internal const val buttonTextIconSpacerWidth = 8 +internal const val buttonFocusedExtraBorderWidth = 2 +internal const val buttonFocusedBorderPadding = 3 +internal const val buttonHeightLarge = 48 +internal const val buttonHeightMedium = 40 +internal const val buttonHeightSmall = 32 +internal const val buttonIconOnlyLargePaddingHorizontal = 16 +internal const val buttonIconOnlyMediumPaddingHorizontal = 12 +internal const val buttonIconOnlySmallPaddingHorizontal = 8 +internal const val buttonTextLargePaddingHorizontal = 42 +internal const val buttonTextMediumPaddingHorizontal = 40 +internal const val buttonTextSmallPaddingHorizontal = 24 + +internal const val fileUploadTitlePaddingBottom = 8 +internal const val fileUploadTextPaddingBottom = 8 +internal const val fileUploadItemsPadding = 8 internal val notificationInlineIconSize = 24.dp internal val notificationInlineHeight = 68.dp @@ -152,6 +151,16 @@ internal val textFieldDropdownOptionHeight = 48.dp internal val textFieldDropdownOptionHorizontalPadding = 16.dp internal val textFieldBorderWidth = 1.dp +internal val textAreaInfoIconSize = 14.dp +internal val textAreaIconSize = 16.dp +internal val textAreaLabelVerticalPadding = 8.dp +internal val textAreaPaddingBottom = 8.dp +internal val textAreaFocusedExtraBorderWidth = 1.dp +internal val textAreaFocusedBorderPadding = 3.dp +internal val textAreaBorderWidth = 1.dp +internal val textAreaIconTopPadding = 4.dp +internal val textAreaDefaultHeight = 120.dp + internal val paginationTileWidth = 38.dp internal val paginationTileHeight = 44.dp internal val paginationVerticalPadding = 15.dp @@ -166,8 +175,8 @@ internal val tabEdgePadding = 0.dp internal const val tabHorizontalPadding = 16 internal const val tabWithIconHorizontalSpacing = 4 -internal val searchBarQueriesVerticalPadding = 9.dp -internal val searchBarQueriesPadding = 8.dp +internal const val searchBarQueriesVerticalPadding = 9 +internal const val searchBarQueriesPadding = 8 internal const val dialogHeightPercentage = 0.8f internal val dialogShape = Shapes.large @@ -189,5 +198,23 @@ internal const val cardButtonPaddingHorizontal = 24 internal const val cardImageHeight = 220 internal const val cardImagePaddingBottom = 8 +internal const val heroPaddingHorizontal = 16 +internal const val heroPaddingVertical = 16 +internal const val heroSubtitlePaddingTop = 12 +internal const val heroTextPaddingTop = 8 +internal const val heroTextPaddingBottom = 16 +internal const val heroImagePaddingBottomShort = 16 +internal const val heroImagePaddingBottomLong = 32 +internal const val heroImageHeight = 220 + internal const val badgeBorderSize = 1.5 internal const val badgeSize = 8 + +internal const val carouselIndicatorSize = 14 +internal const val carouselIndicatorPaddingInner = 7 +internal const val carouselIndicatorPaddingIntra = 8 +internal const val carouselPaddingTop = 40 +internal const val carouselPaddingBottom = 24 +internal const val carouselContentPaddingHorizontal = 36 +internal const val carouselPaddingIntra = 16 +internal const val carouselPageSpacing = 16 \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/theme/Theme.kt b/design/src/main/java/it/inps/sirio/theme/Theme.kt index f368101..c49e54b 100644 --- a/design/src/main/java/it/inps/sirio/theme/Theme.kt +++ b/design/src/main/java/it/inps/sirio/theme/Theme.kt @@ -25,12 +25,22 @@ import it.inps.sirio.ui.accordion.SirioAccordionColors import it.inps.sirio.ui.badge.SirioBadgeColors import it.inps.sirio.ui.card.SirioCardsColors import it.inps.sirio.ui.card.SirioCardsTypography +import it.inps.sirio.ui.carousel.SirioCarouselColors +import it.inps.sirio.ui.checkbox.SirioCheckboxColors +import it.inps.sirio.ui.checkbox.SirioCheckboxTypography import it.inps.sirio.ui.dialog.SirioDialogColors +import it.inps.sirio.ui.hero.SirioHeroColors +import it.inps.sirio.ui.hero.SirioHeroTypography import it.inps.sirio.ui.pagination.SirioPaginationColors +import it.inps.sirio.ui.radiobutton.SirioRadioButtonColors +import it.inps.sirio.ui.radiobutton.SirioRadioButtonTypography import it.inps.sirio.ui.searchbar.SirioSearchBarColors import it.inps.sirio.ui.tabs.SirioTabsColors import it.inps.sirio.ui.tag.SirioTagsColors +import it.inps.sirio.ui.textarea.SirioTextAreaColors import it.inps.sirio.ui.textfield.SirioTextFieldColors +import it.inps.sirio.ui.toggle.SirioToggleColors +import it.inps.sirio.ui.toggle.SirioToggleTypography @Composable fun SirioTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) { @@ -72,42 +82,47 @@ object SirioTheme { @Immutable data class SirioTypography( + val accordionText: TextStyle, + val appNavigationSearch: TextStyle, + val appNavigationSearchPlaceholder: TextStyle, val appNavigationTitle: TextStyle, val appNavigationTitleBig: TextStyle, val appNavigationUsername: TextStyle, - val appNavigationSearchPlaceholder: TextStyle, - val appNavigationSearch: TextStyle, - val fabText: TextStyle, - val tabBarItemText: TextStyle, - val accordionText: TextStyle, - val chipText: TextStyle, - val tagText: TextStyle, - val checkboxLabelText: TextStyle, - val radioLabelText: TextStyle, - val toggleLabelText: TextStyle, - val sliderTitle: TextStyle, - val sliderText: TextStyle, - val sliderNumber: TextStyle, - val progressBarLabel: TextStyle, - val progressBarNumber: TextStyle, val buttonText: TextStyle, - val fileUploadTitle: TextStyle, + val card: SirioCardsTypography, + val checkbox: SirioCheckboxTypography, + val chipText: TextStyle, + val dialogText: TextStyle, + val dialogTitle: TextStyle, + val fabText: TextStyle, val fileUploadText: TextStyle, - val notificationInlineTitle: TextStyle, + val fileUploadTitle: TextStyle, + val hero: SirioHeroTypography, val notificationInlineText: TextStyle, - val notificationToastTitle: TextStyle, + val notificationInlineTitle: TextStyle, val notificationToastText: TextStyle, - val textFieldText: TextStyle, - val textFieldPlaceholder: TextStyle, - val textFieldLabel: TextStyle, - val textFieldHelperText: TextStyle, - val textFieldDropdownLabel: TextStyle, + val notificationToastTitle: TextStyle, val paginationTileNumber: TextStyle, - val tabTextSelected: TextStyle, + val progressBarLabel: TextStyle, + val progressBarNumber: TextStyle, + val radio: SirioRadioButtonTypography, + val sliderNumber: TextStyle, + val sliderText: TextStyle, + val sliderTitle: TextStyle, + val tabBarItemText: TextStyle, val tabTextDefault: TextStyle, - val dialogTitle: TextStyle, - val dialogText: TextStyle, - val card: SirioCardsTypography, + val tabTextSelected: TextStyle, + val tagText: TextStyle, + val textAreaHelperText: TextStyle, + val textAreaLabel: TextStyle, + val textAreaPlaceholder: TextStyle, + val textAreaText: TextStyle, + val textFieldDropdownLabel: TextStyle, + val textFieldHelperText: TextStyle, + val textFieldLabel: TextStyle, + val textFieldPlaceholder: TextStyle, + val textFieldText: TextStyle, + val toggle: SirioToggleTypography, ) /** @@ -116,112 +131,91 @@ data class SirioTypography( @Immutable data class SirioColors( val brand: Color, - val fabDefaultBackground: Color, - val fabHoverBackground: Color, - val fabFocusBackground: Color, - val fabPressedBackground: Color, - val fabBorderFocus: Color, - val fabContent: Color, + val accordion: SirioAccordionColors, val appNavigationBackground: Color, val appNavigationIcon: Color, val appNavigationIconPressed: Color, - val appNavigationText: Color, - val appNavigationUsernameBackground: Color, - val appNavigationUsernameText: Color, val appNavigationSearchBackground1: Color, val appNavigationSearchBackground2: Color, - val appNavigationSearchText: Color, val appNavigationSearchIcon: Color, - val tabBarBackground: Color, - val tabBarContent: Color, - val tabBarActive: Color, - val tag: SirioTagsColors, - val accordion: SirioAccordionColors, + val appNavigationSearchText: Color, + val appNavigationText: Color, + val appNavigationUsernameBackground: Color, + val appNavigationUsernameText: Color, + val badge: SirioBadgeColors, + val buttons: ButtonColors, + val card: SirioCardsColors, + val carousel: SirioCarouselColors, + val checkbox: SirioCheckboxColors, + val chipButtonBorder: Color, + val chipContent: Color, val chipDefaultBackground: Color, - val chipHoverBackground: Color, - val chipFocusBackground: Color, - val chipWithClosePressedBackground: Color, - val chipWithCloseDisabledBackground: Color, - val chipWithCloseDefaultBackground: Color, - val chipWithCloseHoverBackground: Color, - val chipWithCloseFocusBackground: Color, - val chipPressedBackground: Color, - val chipDisabledBackground: Color, val chipDefaultButtonBackground: Color, - val chipHoverButtonBackground: Color, - val chipFocusButtonBackground: Color, - val chipPressedButtonBackground: Color, + val chipDisabledBackground: Color, val chipDisabledButtonBackground: Color, - val chipButtonBorder: Color, - val chipFocusBorder: Color, - val chipContent: Color, val chipDisabledContent: Color, val chipDisactiveBackground: Color, - val checkboxBackground: Color, - val checkboxDefaultContent: Color, - val checkboxHoverContent: Color, - val checkboxFocusContent: Color, - val checkboxFocusBorder: Color, - val checkboxPressed: Color, - val checkboxPressedText: Color, - val checkboxDisabled: Color, - val checkboxDisabledContent: Color, - val radioBackground: Color, - val radioDefault: Color, - val radioHover: Color, - val radioFocus: Color, - val radioFocusBorder: Color, - val radioPressed: Color, - val radioDisabled: Color, - val radioDisabledBorder: Color, - val toggleBackground: Color, - val toggleDefaultOff: Color, - val toggleDefaultOn: Color, - val toggleHoverOff: Color, - val toggleHoverOn: Color, - val toggleFocusOff: Color, - val toggleFocusOn: Color, - val toggleFocusExtraBorder: Color, - val toggleDisabled: Color, - val toggleDisabledBorder: Color, - val sliderThumb: Color, - val sliderPressedThumb: Color, - val sliderDisabled: Color, - val sliderInactive: Color, + val chipFocusBackground: Color, + val chipFocusBorder: Color, + val chipFocusButtonBackground: Color, + val chipHoverBackground: Color, + val chipHoverButtonBackground: Color, + val chipPressedBackground: Color, + val chipPressedButtonBackground: Color, + val chipWithCloseDefaultBackground: Color, + val chipWithCloseDisabledBackground: Color, + val chipWithCloseFocusBackground: Color, + val chipWithCloseHoverBackground: Color, + val chipWithClosePressedBackground: Color, + val dialog: SirioDialogColors, + val fabBorderFocus: Color, + val fabContent: Color, + val fabDefaultBackground: Color, + val fabFocusBackground: Color, + val fabHoverBackground: Color, + val fabPressedBackground: Color, + val fileUploadText: Color, + val fileUploadTitle: Color, + val hero: SirioHeroColors, + val notificationColors: NotificationColors, + val pagination: SirioPaginationColors, + val progressBarBackground: Color, + val progressBarGradient: List, + val progressBarLabel: Color, + val progressBarNumber: Color, + val radio: SirioRadioButtonColors, + val searchBar: SirioSearchBarColors, val sliderActive: Color, - val sliderFocusActive: Color, - val sliderPressedActive: Color, - val sliderTitle: Color, - val sliderText: Color, - val sliderNumbers: Color, val sliderDefaultTextFieldBackground: Color, - val sliderDisabledTextFieldBackground: Color, val sliderDefaultTextFieldBorder: Color, val sliderDefaultTextFieldText: Color, - val sliderHoverTextFieldBorder: Color, - val sliderFocusTextFieldExtraBorder: Color, - val sliderHoverTextFieldText: Color, + val sliderDisabled: Color, + val sliderDisabledTextFieldBackground: Color, + val sliderDisabledTextFieldBorder: Color, + val sliderDisabledTextFieldText: Color, + val sliderFocusActive: Color, val sliderFocusTextFieldBorder: Color, + val sliderFocusTextFieldExtraBorder: Color, val sliderFocusTextFieldText: Color, + val sliderHoverTextFieldBorder: Color, + val sliderHoverTextFieldText: Color, + val sliderInactive: Color, + val sliderNumbers: Color, + val sliderPressedActive: Color, val sliderPressedTextFieldBorder: Color, val sliderPressedTextFieldText: Color, - val sliderDisabledTextFieldBorder: Color, - val sliderDisabledTextFieldText: Color, - val progressBarLabel: Color, - val progressBarNumber: Color, - val progressBarBackground: Color, - val progressBarGradient: List, - val buttons: ButtonColors, - val fileUploadTitle: Color, - val fileUploadText: Color, - val notificationColors: NotificationColors, - val textField: SirioTextFieldColors, - val pagination: SirioPaginationColors, + val sliderPressedThumb: Color, + val sliderText: Color, + val sliderThumb: Color, + val sliderTitle: Color, + val tabBarActive: Color, + val tabBarBackground: Color, + val tabBarContent: Color, val tabs: SirioTabsColors, - val searchBar: SirioSearchBarColors, - val dialog: SirioDialogColors, - val card: SirioCardsColors, - val badge: SirioBadgeColors, + val tag: SirioTagsColors, + val textArea: SirioTextAreaColors, + val textField: SirioTextFieldColors, + val toggle: SirioToggleColors, val isDark: Boolean, ) @@ -261,7 +255,17 @@ data class SirioColorState( info = Color.Unspecified, ) + fun get(disabled: Boolean, focused: Boolean, pressed: Boolean, hovered: Boolean): Color = + when { + disabled -> this.disabled + focused -> this.focused + pressed -> this.pressed + hovered -> this.hovered + else -> this.default + } + companion object { + @Stable val Unspecified = SirioColorState( Color.Unspecified, @@ -289,154 +293,138 @@ data class SirioColorState( private val localSirioColors = staticCompositionLocalOf { SirioColors( brand = Color.Unspecified, - fabDefaultBackground = Color.Unspecified, - fabHoverBackground = Color.Unspecified, - fabFocusBackground = Color.Unspecified, - fabPressedBackground = Color.Unspecified, - fabBorderFocus = Color.Unspecified, - fabContent = Color.Unspecified, + accordion = SirioAccordionColors.Unspecified, appNavigationBackground = Color.Unspecified, appNavigationIcon = Color.Unspecified, appNavigationIconPressed = Color.Unspecified, - appNavigationText = Color.Unspecified, - appNavigationUsernameBackground = Color.Unspecified, - appNavigationUsernameText = Color.Unspecified, appNavigationSearchBackground1 = Color.Unspecified, appNavigationSearchBackground2 = Color.Unspecified, - appNavigationSearchText = Color.Unspecified, appNavigationSearchIcon = Color.Unspecified, - tabBarBackground = Color.Unspecified, - tabBarContent = Color.Unspecified, - tabBarActive = Color.Unspecified, - tag = SirioTagsColors.Unspecified, - accordion = SirioAccordionColors.Unspecified, + appNavigationSearchText = Color.Unspecified, + appNavigationText = Color.Unspecified, + appNavigationUsernameBackground = Color.Unspecified, + appNavigationUsernameText = Color.Unspecified, + badge = SirioBadgeColors.Unspecified, + buttons = ButtonColors.Unspecified, + card = SirioCardsColors.Unspecified, + carousel = SirioCarouselColors.Unspecified, + checkbox = SirioCheckboxColors.Unspecified, + chipButtonBorder = Color.Unspecified, + chipContent = Color.Unspecified, chipDefaultBackground = Color.Unspecified, - chipHoverBackground = Color.Unspecified, + chipDefaultButtonBackground = Color.Unspecified, + chipDisabledBackground = Color.Unspecified, + chipDisabledButtonBackground = Color.Unspecified, + chipDisabledContent = Color.Unspecified, + chipDisactiveBackground = Color.Unspecified, chipFocusBackground = Color.Unspecified, + chipFocusBorder = Color.Unspecified, + chipFocusButtonBackground = Color.Unspecified, + chipHoverBackground = Color.Unspecified, + chipHoverButtonBackground = Color.Unspecified, chipPressedBackground = Color.Unspecified, - chipDisabledBackground = Color.Unspecified, + chipPressedButtonBackground = Color.Unspecified, chipWithCloseDefaultBackground = Color.Unspecified, - chipWithCloseHoverBackground = Color.Unspecified, + chipWithCloseDisabledBackground = Color.Unspecified, chipWithCloseFocusBackground = Color.Unspecified, + chipWithCloseHoverBackground = Color.Unspecified, chipWithClosePressedBackground = Color.Unspecified, - chipWithCloseDisabledBackground = Color.Unspecified, - chipDefaultButtonBackground = Color.Unspecified, - chipHoverButtonBackground = Color.Unspecified, - chipFocusButtonBackground = Color.Unspecified, - chipPressedButtonBackground = Color.Unspecified, - chipDisabledButtonBackground = Color.Unspecified, - chipButtonBorder = Color.Unspecified, - chipFocusBorder = Color.Unspecified, - chipContent = Color.Unspecified, - chipDisabledContent = Color.Unspecified, - chipDisactiveBackground = Color.Unspecified, - checkboxBackground = Color.Unspecified, - checkboxDefaultContent = Color.Unspecified, - checkboxHoverContent = Color.Unspecified, - checkboxFocusContent = Color.Unspecified, - checkboxFocusBorder = Color.Unspecified, - checkboxPressed = Color.Unspecified, - checkboxPressedText = Color.Unspecified, - checkboxDisabled = Color.Unspecified, - checkboxDisabledContent = Color.Unspecified, - radioBackground = Color.Unspecified, - radioDefault = Color.Unspecified, - radioHover = Color.Unspecified, - radioFocus = Color.Unspecified, - radioFocusBorder = Color.Unspecified, - radioPressed = Color.Unspecified, - radioDisabled = Color.Unspecified, - radioDisabledBorder = Color.Unspecified, - toggleBackground = Color.Unspecified, - toggleDefaultOff = Color.Unspecified, - toggleDefaultOn = Color.Unspecified, - toggleHoverOff = Color.Unspecified, - toggleHoverOn = Color.Unspecified, - toggleFocusOff = Color.Unspecified, - toggleFocusOn = Color.Unspecified, - toggleFocusExtraBorder = Color.Unspecified, - toggleDisabled = Color.Unspecified, - toggleDisabledBorder = Color.Unspecified, - sliderThumb = Color.Unspecified, - sliderPressedThumb = Color.Unspecified, - sliderDisabled = Color.Unspecified, - sliderInactive = Color.Unspecified, + dialog = SirioDialogColors.Unspecified, + fabBorderFocus = Color.Unspecified, + fabContent = Color.Unspecified, + fabDefaultBackground = Color.Unspecified, + fabFocusBackground = Color.Unspecified, + fabHoverBackground = Color.Unspecified, + fabPressedBackground = Color.Unspecified, + fileUploadText = Color.Unspecified, + fileUploadTitle = Color.Unspecified, + hero = SirioHeroColors.Unspecified, + notificationColors = NotificationColors.Unspecified, + pagination = SirioPaginationColors.Unspecified, + progressBarBackground = Color.Unspecified, + progressBarGradient = listOf(Color.Unspecified), + progressBarLabel = Color.Unspecified, + progressBarNumber = Color.Unspecified, + radio = SirioRadioButtonColors.Unspecified, + searchBar = SirioSearchBarColors.Unspecified, sliderActive = Color.Unspecified, - sliderFocusActive = Color.Unspecified, - sliderPressedActive = Color.Unspecified, - sliderTitle = Color.Unspecified, - sliderText = Color.Unspecified, - sliderNumbers = Color.Unspecified, sliderDefaultTextFieldBackground = Color.Unspecified, - sliderDisabledTextFieldBackground = Color.Unspecified, sliderDefaultTextFieldBorder = Color.Unspecified, sliderDefaultTextFieldText = Color.Unspecified, - sliderHoverTextFieldBorder = Color.Unspecified, - sliderHoverTextFieldText = Color.Unspecified, + sliderDisabled = Color.Unspecified, + sliderDisabledTextFieldBackground = Color.Unspecified, + sliderDisabledTextFieldBorder = Color.Unspecified, + sliderDisabledTextFieldText = Color.Unspecified, + sliderFocusActive = Color.Unspecified, sliderFocusTextFieldBorder = Color.Unspecified, sliderFocusTextFieldExtraBorder = Color.Unspecified, sliderFocusTextFieldText = Color.Unspecified, + sliderHoverTextFieldBorder = Color.Unspecified, + sliderHoverTextFieldText = Color.Unspecified, + sliderInactive = Color.Unspecified, + sliderNumbers = Color.Unspecified, + sliderPressedActive = Color.Unspecified, sliderPressedTextFieldBorder = Color.Unspecified, sliderPressedTextFieldText = Color.Unspecified, - sliderDisabledTextFieldBorder = Color.Unspecified, - sliderDisabledTextFieldText = Color.Unspecified, - progressBarLabel = Color.Unspecified, - progressBarNumber = Color.Unspecified, - progressBarBackground = Color.Unspecified, - progressBarGradient = listOf(Color.Unspecified), - buttons = ButtonColors.Unspecified, - fileUploadTitle = Color.Unspecified, - fileUploadText = Color.Unspecified, - notificationColors = NotificationColors.Unspecified, - textField = SirioTextFieldColors.Unspecified, - pagination = SirioPaginationColors.Unspecified, + sliderPressedThumb = Color.Unspecified, + sliderText = Color.Unspecified, + sliderThumb = Color.Unspecified, + sliderTitle = Color.Unspecified, + tabBarActive = Color.Unspecified, + tabBarBackground = Color.Unspecified, + tabBarContent = Color.Unspecified, tabs = SirioTabsColors.Unspecified, - searchBar = SirioSearchBarColors.Unspecified, - dialog = SirioDialogColors.Unspecified, - card = SirioCardsColors.Unspecified, - badge = SirioBadgeColors.Unspecified, + tag = SirioTagsColors.Unspecified, + textArea = SirioTextAreaColors.Unspecified, + textField = SirioTextFieldColors.Unspecified, + toggle = SirioToggleColors.Unspecified, isDark = false, ) } internal val LocalSirioTypography = staticCompositionLocalOf { SirioTypography( + accordionText = TextStyle.Default, + appNavigationSearch = TextStyle.Default, + appNavigationSearchPlaceholder = TextStyle.Default, appNavigationTitle = TextStyle.Default, appNavigationTitleBig = TextStyle.Default, appNavigationUsername = TextStyle.Default, - appNavigationSearchPlaceholder = TextStyle.Default, - appNavigationSearch = TextStyle.Default, - fabText = TextStyle.Default, - tabBarItemText = TextStyle.Default, - accordionText = TextStyle.Default, - chipText = TextStyle.Default, - tagText = TextStyle.Default, - checkboxLabelText = TextStyle.Default, - radioLabelText = TextStyle.Default, - toggleLabelText = TextStyle.Default, - sliderTitle = TextStyle.Default, - sliderText = TextStyle.Default, - sliderNumber = TextStyle.Default, - progressBarLabel = TextStyle.Default, - progressBarNumber = TextStyle.Default, buttonText = TextStyle.Default, - fileUploadTitle = TextStyle.Default, + card = SirioCardsTypography.Default, + checkbox = SirioCheckboxTypography.Default, + chipText = TextStyle.Default, + dialogText = TextStyle.Default, + dialogTitle = TextStyle.Default, + fabText = TextStyle.Default, fileUploadText = TextStyle.Default, - notificationInlineTitle = TextStyle.Default, + fileUploadTitle = TextStyle.Default, + hero = SirioHeroTypography.Default, notificationInlineText = TextStyle.Default, - notificationToastTitle = TextStyle.Default, + notificationInlineTitle = TextStyle.Default, notificationToastText = TextStyle.Default, - textFieldText = TextStyle.Default, - textFieldPlaceholder = TextStyle.Default, - textFieldLabel = TextStyle.Default, - textFieldHelperText = TextStyle.Default, - textFieldDropdownLabel = TextStyle.Default, + notificationToastTitle = TextStyle.Default, paginationTileNumber = TextStyle.Default, + progressBarLabel = TextStyle.Default, + progressBarNumber = TextStyle.Default, + radio = SirioRadioButtonTypography.Default, + sliderNumber = TextStyle.Default, + sliderText = TextStyle.Default, + sliderTitle = TextStyle.Default, + tabBarItemText = TextStyle.Default, tabTextDefault = TextStyle.Default, tabTextSelected = TextStyle.Default, - dialogTitle = TextStyle.Default, - dialogText = TextStyle.Default, - card = SirioCardsTypography.Default + tagText = TextStyle.Default, + textAreaHelperText = TextStyle.Default, + textAreaLabel = TextStyle.Default, + textAreaPlaceholder = TextStyle.Default, + textAreaText = TextStyle.Default, + textFieldDropdownLabel = TextStyle.Default, + textFieldHelperText = TextStyle.Default, + textFieldLabel = TextStyle.Default, + textFieldPlaceholder = TextStyle.Default, + textFieldText = TextStyle.Default, + toggle = SirioToggleTypography.Default, ) } diff --git a/design/src/main/java/it/inps/sirio/theme/Type.kt b/design/src/main/java/it/inps/sirio/theme/Type.kt index 18594cf..32763de 100644 --- a/design/src/main/java/it/inps/sirio/theme/Type.kt +++ b/design/src/main/java/it/inps/sirio/theme/Type.kt @@ -9,17 +9,24 @@ package it.inps.sirio.theme import androidx.annotation.Keep +import androidx.compose.ui.text.PlatformTextStyle import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.LineHeightStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration +import androidx.compose.ui.unit.em import androidx.compose.ui.unit.sp import it.inps.sirio.styleDictionary.StyleDictionaryColor import it.inps.sirio.styleDictionary.StyleDictionarySize import it.inps.sirio.styleDictionary.StyleDictionaryTypography import it.inps.sirio.ui.card.SirioCardTypography import it.inps.sirio.ui.card.SirioCardsTypography +import it.inps.sirio.ui.checkbox.SirioCheckboxTypography +import it.inps.sirio.ui.hero.SirioHeroTypography +import it.inps.sirio.ui.radiobutton.SirioRadioButtonTypography +import it.inps.sirio.ui.toggle.SirioToggleTypography internal val Titillium_Web = TitilliumWebFamily internal val Lora = LoraFamily @@ -64,10 +71,10 @@ val labelMd700 = TextStyle( val labelMd600 = TextStyle( fontFamily = StyleDictionaryTypography.typographyGlobalFontFamily01, - fontSize = StyleDictionarySize.typographySpecificAppNavigationTitleMdSize.sp, + fontSize = StyleDictionarySize.typographyAliasLabelMdSize04.sp, lineHeight = StyleDictionarySize.typographyAliasLabelLineHeight04.sp, - fontWeight = StyleDictionaryTypography.typographySpecificAppNavigationTitleFontWeight600.getFontWeight(), - fontStyle = StyleDictionaryTypography.typographySpecificAppNavigationTitleFontWeight600.getFontStyle(), + fontWeight = StyleDictionaryTypography.typographyAliasLabelFontWeight600.getFontWeight(), + fontStyle = StyleDictionaryTypography.typographyAliasLabelFontWeight600.getFontStyle(), ) val tabBarLabelXs = TextStyle( @@ -85,6 +92,11 @@ val helperTextXs400 = TextStyle( lineHeight = StyleDictionarySize.typographyAliasLabelXsSize02.sp, fontWeight = StyleDictionaryTypography.typographyAliasLabelFontWeight400.getFontWeight(), fontStyle = StyleDictionaryTypography.typographyAliasLabelFontWeight400.getFontStyle(), + platformStyle = PlatformTextStyle(includeFontPadding = false), + lineHeightStyle = LineHeightStyle( + alignment = LineHeightStyle.Alignment.Center, + trim = LineHeightStyle.Trim.Both + ), ) val labelMdNumber400 = TextStyle( @@ -151,9 +163,22 @@ val labelMd400 = TextStyle( val placeholderMd400 = TextStyle( fontFamily = StyleDictionaryTypography.typographyGlobalFontFamily01, fontSize = StyleDictionarySize.typographyAliasLabelMdSize04.sp, - lineHeight = StyleDictionarySize.typographyAliasLabelLineHeight01.sp, + lineHeight = 1.em, fontWeight = StyleDictionaryTypography.typographyAliasLabelFontWeight400.getFontWeight(), fontStyle = StyleDictionaryTypography.typographyAliasLabelFontWeight400.getFontStyle(), + platformStyle = PlatformTextStyle(includeFontPadding = false), + lineHeightStyle = LineHeightStyle( + alignment = LineHeightStyle.Alignment.Center, + trim = LineHeightStyle.Trim.Both + ), +) + +val h2Md = TextStyle( + fontFamily = StyleDictionaryTypography.typographyGlobalFontFamily01, + fontSize = StyleDictionarySize.typographyAliasH2MdSize11.sp, + lineHeight = StyleDictionarySize.typographyAliasH2MdLineHeight11.sp, + fontWeight = StyleDictionaryTypography.typographyAliasH2FontWeight700.getFontWeight(), + fontStyle = StyleDictionaryTypography.typographyAliasH2FontWeight700.getFontStyle(), ) val h4Md = TextStyle( @@ -164,6 +189,14 @@ val h4Md = TextStyle( fontStyle = StyleDictionaryTypography.typographyAliasLabelFontWeight700.getFontStyle(), ) +val h5Md = TextStyle( + fontFamily = StyleDictionaryTypography.typographyGlobalFontFamily01, + fontSize = StyleDictionarySize.typographyAliasH5MdSize06.sp, + lineHeight = StyleDictionarySize.typographyAliasH5MdLineHeight06.sp, + fontWeight = StyleDictionaryTypography.typographyAliasH5FontWeight600.getFontWeight(), + fontStyle = StyleDictionaryTypography.typographyAliasH5FontWeight600.getFontStyle(), +) + val h6Md = TextStyle( fontFamily = StyleDictionaryTypography.typographyGlobalFontFamily01, fontSize = StyleDictionarySize.typographyAliasH6MdSize05.sp, @@ -181,41 +214,13 @@ val signaturePMd02 = TextStyle( ) internal val Typography = SirioTypography( + accordionText = labelMd600, + appNavigationSearch = labelMd600, + appNavigationSearchPlaceholder = labelMd600, appNavigationTitle = appNavigationTitleMd, appNavigationTitleBig = appNavigationTitleXl, appNavigationUsername = labelMd700, - appNavigationSearchPlaceholder = labelMd600, - appNavigationSearch = labelMd600, - fabText = labelMd700, - tabBarItemText = tabBarLabelXs, - accordionText = labelMd600, - chipText = labelMd700, - tagText = labelMd700, - checkboxLabelText = labelMd400, - radioLabelText = labelMd400, - toggleLabelText = labelMd400, - sliderTitle = labelMd600, - sliderText = helperTextXs400, - sliderNumber = labelMdNumber400, - progressBarLabel = labelMd600, - progressBarNumber = labelProgressBarNumber, buttonText = labelMd700, - fileUploadTitle = labelMd600, - fileUploadText = helperTextXs400, - notificationToastTitle = labelMd700, - notificationToastText = pMd01, - notificationInlineTitle = mPMd01_700, - notificationInlineText = pMd01, - textFieldLabel = labelMd600, - textFieldPlaceholder = placeholderMd400, - textFieldText = placeholderMd400, - textFieldHelperText = helperTextXs400, - textFieldDropdownLabel = placeholderMd400, - paginationTileNumber = labelMdNumber400, - tabTextDefault = labelMd400, - tabTextSelected = labelMd700, - dialogTitle = h4Md, - dialogText = pMd01, card = SirioCardsTypography( editorial = SirioCardTypography( date = labelMdNumber400, @@ -232,6 +237,43 @@ internal val Typography = SirioTypography( signature = signaturePMd02, ), ), + checkbox = SirioCheckboxTypography(text = labelMd400), + chipText = labelMd700, + dialogText = pMd01, + dialogTitle = h4Md, + fabText = labelMd700, + fileUploadText = helperTextXs400, + fileUploadTitle = labelMd600, + hero = SirioHeroTypography( + title = h2Md, + subtitle = h4Md, + text = pMd01, + ), + notificationInlineText = pMd01, + notificationInlineTitle = mPMd01_700, + notificationToastText = pMd01, + notificationToastTitle = labelMd700, + paginationTileNumber = labelMdNumber400, + progressBarLabel = labelMd600, + progressBarNumber = labelProgressBarNumber, + radio = SirioRadioButtonTypography(text = labelMd400), + sliderNumber = labelMdNumber400, + sliderText = helperTextXs400, + sliderTitle = labelMd600, + tabBarItemText = tabBarLabelXs, + tabTextDefault = labelMd400, + tabTextSelected = labelMd700, + tagText = labelMd700, + textAreaHelperText = helperTextXs400, + textAreaLabel = labelMd600, + textAreaPlaceholder = placeholderMd400, + textAreaText = placeholderMd400, + textFieldDropdownLabel = placeholderMd400, + textFieldHelperText = helperTextXs400, + textFieldLabel = labelMd600, + textFieldPlaceholder = placeholderMd400, + textFieldText = placeholderMd400, + toggle = SirioToggleTypography(text = labelMd400), ) @Keep @@ -279,4 +321,4 @@ enum class TypographyStyle { abstract fun getFontWeight(): FontWeight? abstract fun getFontStyle(): FontStyle? -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/accordion/Accordion.kt b/design/src/main/java/it/inps/sirio/ui/accordion/Accordion.kt index 0de06f3..aab2a0f 100644 --- a/design/src/main/java/it/inps/sirio/ui/accordion/Accordion.kt +++ b/design/src/main/java/it/inps/sirio/ui/accordion/Accordion.kt @@ -11,7 +11,7 @@ package it.inps.sirio.ui.accordion import android.content.res.Configuration import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.material.Text +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.datasource.LoremIpsum @@ -61,4 +61,4 @@ private fun AccordionPreview() { onTapAccordion = {}) { Text(text = content) }) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/accordion/AccordionCommon.kt b/design/src/main/java/it/inps/sirio/ui/accordion/AccordionCommon.kt index 3f12666..ac966e8 100644 --- a/design/src/main/java/it/inps/sirio/ui/accordion/AccordionCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/accordion/AccordionCommon.kt @@ -30,7 +30,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentHeight -import androidx.compose.material.Text +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import androidx.compose.runtime.getValue @@ -159,18 +159,21 @@ private fun getAccordionParams( SirioTheme.colors.accordion.border.focused, accordionFocusBorderWidth ) + isPressed -> AccordionParams( SirioTheme.colors.accordion.background.pressed, SirioTheme.colors.accordion.content.pressed, SirioTheme.colors.accordion.border.pressed, accordionDefaultBorderWidth ) + isHovered -> AccordionParams( SirioTheme.colors.accordion.background.hovered, SirioTheme.colors.accordion.background.hovered, SirioTheme.colors.accordion.border.hovered, accordionDefaultBorderWidth ) + else -> if (expanded) AccordionParams( SirioTheme.colors.accordion.activedBackground, SirioTheme.colors.accordion.content.default, @@ -194,13 +197,13 @@ data class AccordionParams( @Keep data class SirioAccordionColors( - var background: SirioColorState, - var border: SirioColorState, - var content: SirioColorState, - var activedBackground: Color, - var activedBorder: Color, - var contentBackground: Color, - var contentBorder: Color, + val background: SirioColorState, + val border: SirioColorState, + val content: SirioColorState, + val activedBackground: Color, + val activedBorder: Color, + val contentBackground: Color, + val contentBorder: Color, ) { companion object { @Stable @@ -229,16 +232,9 @@ private fun AccordionCommonPreview() { AccordionCommon(text = "Accordion Item #1", open = true) { Column { for (i in 1..5) { - Text( - text = "Content $i", - Modifier.background(Color.Red) - ) + Text(text = "Content $i", modifier = Modifier.background(Color.Red)) } } -// Text( -// text = "Content", -// Modifier.background(Color.Red) -// ) } AccordionCommon( text = "Accordion Item #1", @@ -246,4 +242,4 @@ private fun AccordionCommonPreview() { ) { Text(text = "Content") } } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/accordion/AccordionGroup.kt b/design/src/main/java/it/inps/sirio/ui/accordion/AccordionGroup.kt index 8b1381d..71e5f35 100644 --- a/design/src/main/java/it/inps/sirio/ui/accordion/AccordionGroup.kt +++ b/design/src/main/java/it/inps/sirio/ui/accordion/AccordionGroup.kt @@ -13,9 +13,7 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.wrapContentHeight -import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.foundation.lazy.items -import androidx.compose.material.Text +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -31,12 +29,12 @@ import it.inps.sirio.theme.SirioTheme */ @Composable fun AccordionGroup(data: List) { - LazyColumn( + Column( Modifier .fillMaxWidth() - .wrapContentHeight() + .wrapContentHeight(), ) { - items(data) { itemData -> + data.forEach { itemData -> AccordionCommon( text = itemData.text, open = itemData.open, @@ -88,4 +86,4 @@ private fun AccordionGroupPreview() { ) ) } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigation.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigation.kt index 74b1bd1..1a724fe 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigation.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigation.kt @@ -10,8 +10,14 @@ package it.inps.sirio.ui.appnavigation import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* -import androidx.compose.material3.* +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -49,8 +55,9 @@ fun AppNavigation( leftItem?.let { AppNavigationIconButton( icon = it.icon, - action = it.action, contentDescription = it.contentDescription, + badge = it.badge, + action = it.action, ) } }, @@ -89,8 +96,8 @@ private fun AppNavigationPreview() { AppNavigation( title = title, leftItem = AppNavigationItemData(icon = FaIcons.AngleLeft, action = {}), - rightFirstItem = AppNavigationItemData(icon = FaIcons.User, action = {}), - rightSecondItem = AppNavigationItemData(icon = FaIcons.Bell, action = {}), + rightFirstItem = AppNavigationItemData(icon = FaIcons.User,badge = true, action = {}), + rightSecondItem = AppNavigationItemData(icon = FaIcons.Bell,badge = true, action = {}), ) Spacer(modifier = Modifier.height(8.dp)) } diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationBig.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationBig.kt index ffe280e..8f26fcb 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationBig.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationBig.kt @@ -10,7 +10,8 @@ package it.inps.sirio.ui.appnavigation import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.LargeTopAppBar import androidx.compose.material3.TopAppBarDefaults @@ -52,6 +53,7 @@ fun AppNavigationBig( AppNavigationIconButton( icon = it.icon, contentDescription = it.contentDescription, + badge = it.badge, action = it.action, ) } diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationCommon.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationCommon.kt index 72e9490..1584291 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationCommon.kt @@ -14,11 +14,13 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.ripple.LocalRippleTheme import androidx.compose.material.ripple.RippleAlpha import androidx.compose.material.ripple.RippleTheme +import androidx.compose.material3.BadgedBox import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.IconButton import androidx.compose.material3.TextButton @@ -33,10 +35,12 @@ import androidx.compose.ui.unit.dp import com.guru.fontawesomecomposelib.FaIconType import com.guru.fontawesomecomposelib.FaIcons import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.appNavigationBadgePadding import it.inps.sirio.theme.appNavigationIconSize import it.inps.sirio.theme.appNavigationTitleLongMaxLines import it.inps.sirio.theme.appNavigationTitleMaxLines import it.inps.sirio.theme.appNavigationUsernameButtonSize +import it.inps.sirio.ui.badge.SirioBadgeCommon import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon @@ -98,6 +102,7 @@ internal fun AppNavigationButton( AppNavigationIconButton( icon = data.icon, contentDescription = data.contentDescription, + badge = data.badge, action = data.action ) } @@ -107,21 +112,36 @@ internal fun AppNavigationButton( * A button with an icon * * @param icon The icon to show + * @param badge If the icon has a badge * @param action The click action callback */ @Composable internal fun AppNavigationIconButton( icon: FaIconType, contentDescription: String? = null, + badge: Boolean = false, action: () -> Unit, ) { IconButton(onClick = action) { - SirioIcon( - faIcon = icon, - iconColor = SirioTheme.colors.appNavigationIcon, - size = appNavigationIconSize, - contentDescription = contentDescription, - ) + BadgedBox( + badge = { + if (badge) { + SirioBadgeCommon( + modifier = Modifier.padding( + top = appNavigationBadgePadding.dp, + end = appNavigationBadgePadding.dp + ) + ) + } + }, + ) { + SirioIcon( + faIcon = icon, + iconColor = SirioTheme.colors.appNavigationIcon, + size = appNavigationIconSize, + contentDescription = contentDescription, + ) + } } } @@ -193,7 +213,7 @@ private fun AppNavigationTitlePreview() { SirioTheme(darkTheme = true) { AppNavigationTitle(title = title) } - AppNavigationIconButton(icon = FaIcons.Home) {} + AppNavigationIconButton(icon = FaIcons.Home, badge = true) {} } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationItemData.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationItemData.kt index 791090a..03787b5 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationItemData.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationItemData.kt @@ -19,6 +19,7 @@ import com.guru.fontawesomecomposelib.FaIcons * @param action The onClick callback * @param username The string for the username item data * @param contentDescription The content description for the item + * @param badge If the item's icon has a badge */ @Keep data class AppNavigationItemData( @@ -26,4 +27,5 @@ data class AppNavigationItemData( val action: () -> Unit, val username: String = "", val contentDescription: String? = null, -) \ No newline at end of file + val badge: Boolean = false, +) diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLogo.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLogo.kt index 2518ecf..85a07a8 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLogo.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLogo.kt @@ -10,8 +10,14 @@ package it.inps.sirio.ui.appnavigation import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* -import androidx.compose.material3.* +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.size +import androidx.compose.material3.CenterAlignedTopAppBar +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -55,6 +61,7 @@ fun AppNavigationLogo( AppNavigationIconButton( icon = it.icon, contentDescription = it.contentDescription, + badge = it.badge, action = it.action, ) } diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLongTitle.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLongTitle.kt index 9fcff98..ad077f4 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLongTitle.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationLongTitle.kt @@ -10,7 +10,9 @@ package it.inps.sirio.ui.appnavigation import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.LargeTopAppBar import androidx.compose.material3.TopAppBarDefaults @@ -54,6 +56,7 @@ fun AppNavigationLongTitle( AppNavigationIconButton( icon = it.icon, contentDescription = it.contentDescription, + badge = it.badge, action = it.action, ) } @@ -92,4 +95,4 @@ private fun AppNavigationMediumPreview() { ) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSearch.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSearch.kt index 70ad283..a98f707 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSearch.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSearch.kt @@ -10,19 +10,31 @@ package it.inps.sirio.ui.appnavigation import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardActionScope import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material3.* -import androidx.compose.runtime.* +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.IconButton +import androidx.compose.material3.TextField +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.material3.TopAppBarScrollBehavior +import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.guru.fontawesomecomposelib.FaIcons -import it.inps.sirio.theme.* +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.appNavigationSearchCornerRadius +import it.inps.sirio.theme.appNavigationSearchPadding import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon @@ -152,4 +164,4 @@ private fun AppNavigationSearchPreview() { Spacer(modifier = Modifier.height(8.dp)) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSelection.kt b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSelection.kt index 0f60ce7..fbe7880 100644 --- a/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSelection.kt +++ b/design/src/main/java/it/inps/sirio/ui/appnavigation/AppNavigationSelection.kt @@ -46,6 +46,7 @@ fun AppNavigationSelection( leftItem?.let { AppNavigationIconButton( icon = it.icon, + badge = it.badge, action = it.action, ) } @@ -83,4 +84,4 @@ private fun AppNavigationSelectionPreview() { ) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/badge/SirioBadge.kt b/design/src/main/java/it/inps/sirio/ui/badge/SirioBadge.kt new file mode 100644 index 0000000..21066f4 --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/badge/SirioBadge.kt @@ -0,0 +1,18 @@ +package it.inps.sirio.ui.badge + +import androidx.compose.runtime.Composable +import androidx.compose.ui.tooling.preview.Preview +import it.inps.sirio.theme.SirioTheme + +@Composable +fun SirioBadge() { + SirioBadgeCommon() +} + +@Preview +@Composable +internal fun SirioBadgePreview() { + SirioTheme { + SirioBadge() + } +} \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/ui/badge/SirioBadgeCommon.kt b/design/src/main/java/it/inps/sirio/ui/badge/SirioBadgeCommon.kt index af8b6f9..04da181 100644 --- a/design/src/main/java/it/inps/sirio/ui/badge/SirioBadgeCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/badge/SirioBadgeCommon.kt @@ -1,10 +1,3 @@ -// -// SirioBadgeCommon.kt -// -// SPDX-FileCopyrightText: 2024 Istituto Nazionale Previdenza Sociale -// -// SPDX-License-Identifier: BSD-3-Clause -// package it.inps.sirio.ui.badge import androidx.annotation.Keep @@ -25,9 +18,9 @@ import it.inps.sirio.theme.badgeBorderSize import it.inps.sirio.theme.badgeSize @Composable -internal fun SirioBadgeCommon() { +internal fun SirioBadgeCommon(modifier: Modifier = Modifier) { Box( - modifier = Modifier + modifier = modifier .size(badgeSize.dp) .clip(CircleShape) .background(SirioTheme.colors.badge.border) @@ -39,8 +32,8 @@ internal fun SirioBadgeCommon() { @Keep data class SirioBadgeColors( - var background: Color, - var border: Color, + val background: Color, + val border: Color, ) { companion object { @Stable @@ -54,8 +47,8 @@ data class SirioBadgeColors( @Preview @Composable -fun SirioBadgeCommonPreview() { +internal fun SirioBadgeCommonPreview() { SirioTheme { SirioBadgeCommon() } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/button/SirioButtonCommon.kt b/design/src/main/java/it/inps/sirio/ui/button/SirioButtonCommon.kt index e8d59b0..9efc58d 100644 --- a/design/src/main/java/it/inps/sirio/ui/button/SirioButtonCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/button/SirioButtonCommon.kt @@ -24,23 +24,29 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredWidth +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.OutlinedButton +import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable +import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.guru.fontawesomecomposelib.FaIconType import com.guru.fontawesomecomposelib.FaIcons @@ -51,20 +57,19 @@ import it.inps.sirio.theme.buttonBorderWidth import it.inps.sirio.theme.buttonCornerRadius import it.inps.sirio.theme.buttonFocusedBorderPadding import it.inps.sirio.theme.buttonFocusedExtraBorderWidth -import it.inps.sirio.theme.buttonIconSize -import it.inps.sirio.theme.buttonLargeWithTextHorizontalPadding -import it.inps.sirio.theme.buttonLargeWithTextVerticalPadding -import it.inps.sirio.theme.buttonLargeWithoutTextHorizontalPadding -import it.inps.sirio.theme.buttonLargeWithoutTextVerticalPadding -import it.inps.sirio.theme.buttonMediumWithTextHorizontalPadding -import it.inps.sirio.theme.buttonMediumWithTextVerticalPadding -import it.inps.sirio.theme.buttonMediumWithoutTextHorizontalPadding -import it.inps.sirio.theme.buttonMediumWithoutTextVerticalPadding -import it.inps.sirio.theme.buttonSmallWithTextHorizontalPadding -import it.inps.sirio.theme.buttonSmallWithTextVerticalPadding -import it.inps.sirio.theme.buttonSmallWithoutTextHorizontalPadding -import it.inps.sirio.theme.buttonSmallWithoutTextVerticalPadding +import it.inps.sirio.theme.buttonHeightLarge +import it.inps.sirio.theme.buttonHeightMedium +import it.inps.sirio.theme.buttonHeightSmall +import it.inps.sirio.theme.buttonIconOnlyLargePaddingHorizontal +import it.inps.sirio.theme.buttonIconOnlyMediumPaddingHorizontal +import it.inps.sirio.theme.buttonIconOnlySmallPaddingHorizontal +import it.inps.sirio.theme.buttonIconSizeLarge +import it.inps.sirio.theme.buttonIconSizeMedium +import it.inps.sirio.theme.buttonIconSizeSmall import it.inps.sirio.theme.buttonTextIconSpacerWidth +import it.inps.sirio.theme.buttonTextLargePaddingHorizontal +import it.inps.sirio.theme.buttonTextMediumPaddingHorizontal +import it.inps.sirio.theme.buttonTextSmallPaddingHorizontal import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon @@ -99,39 +104,58 @@ internal fun SirioButtonCommon( val isHovered by interactionSource.collectIsHoveredAsState() val buttonParams = getButtonParams(enabled, colors, isFocused, isPressed, isHovered) + val height = when (size) { + ButtonSize.Large -> buttonHeightLarge + ButtonSize.Medium -> buttonHeightMedium + ButtonSize.Small -> buttonHeightSmall + } + val iconSize = when (size) { + ButtonSize.Large -> buttonIconSizeLarge + ButtonSize.Medium -> buttonIconSizeMedium + ButtonSize.Small -> buttonIconSizeSmall + } + val contentHorizontalPadding = + getContentHorizontalPadding(size, isFocused, text.isNullOrEmpty()) + + val heightModifier = modifier + .height(height.dp) + .minimumInteractiveComponentSize() Box( modifier = if (isFocused) { - modifier + heightModifier .border( - width = buttonFocusedExtraBorderWidth, + width = buttonFocusedExtraBorderWidth.dp, color = SirioTheme.colors.buttons.focusExtraBorder, shape = Shapes.small, ) - .padding(buttonFocusedBorderPadding) + .padding(buttonFocusedBorderPadding.dp) } else { - modifier + heightModifier }, + propagateMinConstraints = true, ) { OutlinedButton( - onClick = { - onClick() - }, - modifier = modifier.focusable(true, interactionSource = interactionSource), + onClick = onClick, + modifier = Modifier + .fillMaxHeight() + .widthIn(min = (iconSize + 2 * contentHorizontalPadding).dp) + .focusable(true, interactionSource = interactionSource), enabled = enabled, interactionSource = interactionSource, - shape = RoundedCornerShape(buttonCornerRadius), - border = BorderStroke(width = buttonBorderWidth, color = buttonParams.borderColor), + shape = RoundedCornerShape(buttonCornerRadius.dp), + border = BorderStroke(width = buttonBorderWidth.dp, color = buttonParams.borderColor), colors = ButtonDefaults.outlinedButtonColors( containerColor = buttonParams.backgroundColor, disabledContainerColor = buttonParams.backgroundColor, ), - contentPadding = getContentPadding(size, isFocused, text.isNullOrEmpty()), + contentPadding = PaddingValues(horizontal = contentHorizontalPadding.dp), content = { ButtonContent( text = text, textColor = buttonParams.textColor, icon = faIcon, iconResId = iconResId, + iconSize = iconSize.dp, iconColor = buttonParams.iconColor, iconContentDescription = iconContentDescription, ) @@ -194,79 +218,25 @@ private fun getButtonParams( } /** - * The internal padding depends on size, focused state and text in button + * The internal horizontal padding depends on size, focused state and text in button * * @param size The [ButtonSize] * @param isFocused Whether the button has focus - * @param noText Whether the button is only icon + * @param iconOnly Whether the button is icon only */ @Composable -private fun getContentPadding( +private fun getContentHorizontalPadding( size: ButtonSize, isFocused: Boolean, - noText: Boolean, -): PaddingValues = - when (size) { - ButtonSize.Large -> { - if (isFocused) - if (noText) PaddingValues( - horizontal = buttonLargeWithoutTextHorizontalPadding - buttonFocusedBorderPadding, - vertical = buttonLargeWithoutTextVerticalPadding - buttonFocusedBorderPadding, - ) else PaddingValues( - horizontal = buttonLargeWithTextHorizontalPadding - buttonFocusedBorderPadding, - vertical = buttonLargeWithTextVerticalPadding - buttonFocusedBorderPadding, - ) - else { - if (noText) PaddingValues( - horizontal = buttonLargeWithoutTextHorizontalPadding, - vertical = buttonLargeWithoutTextVerticalPadding - ) else PaddingValues( - horizontal = buttonLargeWithTextHorizontalPadding, - vertical = buttonLargeWithTextVerticalPadding - ) - } - } - - ButtonSize.Medium -> { - if (isFocused) - if (noText) PaddingValues( - horizontal = buttonMediumWithoutTextHorizontalPadding - buttonFocusedBorderPadding, - vertical = buttonMediumWithoutTextVerticalPadding - buttonFocusedBorderPadding, - ) else PaddingValues( - horizontal = buttonMediumWithTextHorizontalPadding - buttonFocusedBorderPadding, - vertical = buttonMediumWithTextVerticalPadding - buttonFocusedBorderPadding, - ) - else { - if (noText) PaddingValues( - horizontal = buttonMediumWithoutTextHorizontalPadding, - vertical = buttonMediumWithoutTextVerticalPadding - ) else PaddingValues( - horizontal = buttonMediumWithTextHorizontalPadding, - vertical = buttonMediumWithTextVerticalPadding - ) - } - } - - ButtonSize.Small -> { - if (isFocused) - if (noText) PaddingValues( - horizontal = buttonSmallWithoutTextHorizontalPadding - buttonFocusedBorderPadding, - vertical = buttonSmallWithoutTextVerticalPadding - buttonFocusedBorderPadding, - ) else PaddingValues( - horizontal = buttonSmallWithTextHorizontalPadding - buttonFocusedBorderPadding, - vertical = buttonSmallWithTextVerticalPadding - buttonFocusedBorderPadding, - ) - else { - if (noText) PaddingValues( - horizontal = buttonSmallWithoutTextHorizontalPadding, - vertical = buttonSmallWithoutTextVerticalPadding - ) else PaddingValues( - horizontal = buttonSmallWithTextHorizontalPadding, - vertical = buttonSmallWithTextVerticalPadding - ) - } - } + iconOnly: Boolean, +): Int { + val horizontalPadding = when (size) { + ButtonSize.Large -> if (iconOnly) buttonIconOnlyLargePaddingHorizontal else buttonTextLargePaddingHorizontal + ButtonSize.Medium -> if (iconOnly) buttonIconOnlyMediumPaddingHorizontal else buttonTextMediumPaddingHorizontal + ButtonSize.Small -> if (iconOnly) buttonIconOnlySmallPaddingHorizontal else buttonTextSmallPaddingHorizontal } + return if (isFocused) horizontalPadding - buttonFocusedBorderPadding else horizontalPadding +} /** * The button content in row @@ -284,10 +254,12 @@ private fun ButtonContent( textColor: Color, icon: FaIconType?, @DrawableRes iconResId: Int?, + iconSize: Dp, iconColor: Color, iconContentDescription: String? = null, ) { - val withIcon = icon != null || iconResId != null + val withIcon: Boolean + by remember(icon, iconResId) { derivedStateOf { icon != null || iconResId != null } } if (!text.isNullOrEmpty()) { SirioTextCommon( text = text, @@ -296,14 +268,14 @@ private fun ButtonContent( ) } if (!text.isNullOrEmpty() && withIcon) { - Spacer(Modifier.requiredWidth(buttonTextIconSpacerWidth)) + Spacer(Modifier.requiredWidth(buttonTextIconSpacerWidth.dp)) } if (withIcon) { SirioIcon( faIcon = icon, iconResId = iconResId, iconColor = iconColor, - size = buttonIconSize, + size = iconSize, contentDescription = iconContentDescription, ) } @@ -318,10 +290,10 @@ data class ButtonParams( @Keep data class SirioButtonColors( - var background: SirioColorState, - var border: SirioColorState? = null, - var icon: SirioColorState, - var text: SirioColorState, + val background: SirioColorState, + val border: SirioColorState? = null, + val icon: SirioColorState, + val text: SirioColorState, ) { constructor( background: SirioColorState, @@ -529,4 +501,4 @@ private fun ButtonCommonPreviewContent(size: ButtonSize) { size = size, ) {} } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/card/SirioCardCommon.kt b/design/src/main/java/it/inps/sirio/ui/card/SirioCardCommon.kt index e6fe676..df81aa0 100644 --- a/design/src/main/java/it/inps/sirio/ui/card/SirioCardCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/card/SirioCardCommon.kt @@ -6,10 +6,6 @@ // SPDX-License-Identifier: BSD-3-Clause // -@file:OptIn( - ExperimentalMaterial3Api::class, -) - package it.inps.sirio.ui.card import androidx.annotation.DrawableRes @@ -25,7 +21,6 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import androidx.compose.ui.Alignment @@ -43,12 +38,23 @@ import coil.request.ImageRequest import com.guru.fontawesomecomposelib.FaIconType import com.guru.fontawesomecomposelib.FaIcons import it.inps.sirio.styleDictionary.StyleDictionaryBoxShadow -import it.inps.sirio.theme.* +import it.inps.sirio.theme.Shapes +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.cardButtonPaddingHorizontal +import it.inps.sirio.theme.cardButtonPaddingTop +import it.inps.sirio.theme.cardIconSize +import it.inps.sirio.theme.cardImageHeight +import it.inps.sirio.theme.cardImagePaddingBottom +import it.inps.sirio.theme.cardPaddingHorizontal +import it.inps.sirio.theme.cardPaddingVertical +import it.inps.sirio.theme.cardSignaturePaddingTop +import it.inps.sirio.theme.cardSubtitlePaddingTop +import it.inps.sirio.theme.cardTextPaddingTop import it.inps.sirio.ui.button.ButtonSize import it.inps.sirio.ui.button.SirioButtonColors import it.inps.sirio.ui.button.SirioButtonCommon import it.inps.sirio.ui.tag.SirioTagColors -import it.inps.sirio.ui.tag.TagCommon +import it.inps.sirio.ui.tag.SirioTagCommon import it.inps.sirio.ui.text.SirioText import it.inps.sirio.utils.SirioIcon @@ -133,7 +139,7 @@ internal fun SirioCardCommon( verticalAlignment = Alignment.CenterVertically ) { category?.let { - TagCommon( + SirioTagCommon( text = category, colors = colors.category, ) @@ -228,8 +234,8 @@ enum class SirioCardType { @Keep data class SirioCardsColors( - var editorial: SirioCardColors, - var process: SirioCardColors, + val editorial: SirioCardColors, + val process: SirioCardColors, ) { companion object { @Stable @@ -242,16 +248,16 @@ data class SirioCardsColors( @Keep data class SirioCardColors( - var background: Color, - var category: SirioTagColors, - var icon: Color, - var date: Color, - var title: Color, - var subtitle: Color, - var text: Color, - var signature: Color, - var button: SirioButtonColors, - var iconButton: SirioButtonColors, + val background: Color, + val category: SirioTagColors, + val icon: Color, + val date: Color, + val title: Color, + val subtitle: Color, + val text: Color, + val signature: Color, + val button: SirioButtonColors, + val iconButton: SirioButtonColors, ) { companion object { @Stable @@ -272,8 +278,8 @@ data class SirioCardColors( @Keep data class SirioCardsTypography( - var editorial: SirioCardTypography, - var process: SirioCardTypography, + val editorial: SirioCardTypography, + val process: SirioCardTypography, ) { companion object { @Stable @@ -286,11 +292,11 @@ data class SirioCardsTypography( @Keep data class SirioCardTypography( - var date: TextStyle, - var title: TextStyle, - var subtitle: TextStyle, - var text: TextStyle, - var signature: TextStyle, + val date: TextStyle, + val title: TextStyle, + val subtitle: TextStyle, + val text: TextStyle, + val signature: TextStyle, ) { companion object { @Stable diff --git a/design/src/main/java/it/inps/sirio/ui/carousel/SirioCarousel.kt b/design/src/main/java/it/inps/sirio/ui/carousel/SirioCarousel.kt new file mode 100644 index 0000000..e779cbc --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/carousel/SirioCarousel.kt @@ -0,0 +1,56 @@ +// +// SirioCarousel.kt +// +// SPDX-FileCopyrightText: 2022 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// +package it.inps.sirio.ui.carousel + +import android.util.Log +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.derivedStateOf +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember + +/** + * A Composable function that renders a carousel with the provided items + * + * @param items A list of items to be displayed in the carousel. + * @param index The index of the initially selected item. Default is 0. + * @param background The background style for the carousel. + * @param key a stable and unique key representing the item. When you specify the key the scroll + * position will be maintained based on the key, which means if you add/remove items before the + * current visible item the item with the given key will be kept as the first visible one. @see [HorizontalPager] + * @param content The Composable function to render each item in the carousel. + */ +@Composable +fun SirioCarousel( + items: List, + index: Int = 0, + background: SirioCarouselBackground, + key: ((index: Int) -> Any)? = null, + content: @Composable (T) -> Unit, +) { + LaunchedEffect(items) { + if (items.size > 6) + Log.e("SirioCarousel", "Max elements allowed is 6") + } + val pages: List by remember(items) { + derivedStateOf { items.take(6) } + } + SirioCarouselCommon( + items = pages, + index = index, + background = background, + key = key, + content = content + ) +} + +enum class SirioCarouselBackground { + LIGHT, + MEDIUM, +} \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/ui/carousel/SirioCarouselCommon.kt b/design/src/main/java/it/inps/sirio/ui/carousel/SirioCarouselCommon.kt new file mode 100644 index 0000000..d717e92 --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/carousel/SirioCarouselCommon.kt @@ -0,0 +1,225 @@ +// +// SirioCarouselCommon.kt +// +// SPDX-FileCopyrightText: 2022 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// +@file:OptIn(ExperimentalFoundationApi::class) + +package it.inps.sirio.ui.carousel + +import androidx.annotation.Keep +import androidx.compose.animation.animateContentSize +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.PagerState +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.guru.fontawesomecomposelib.FaIconType +import com.guru.fontawesomecomposelib.FaIcons +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.carouselContentPaddingHorizontal +import it.inps.sirio.theme.carouselIndicatorPaddingInner +import it.inps.sirio.theme.carouselIndicatorPaddingIntra +import it.inps.sirio.theme.carouselIndicatorSize +import it.inps.sirio.theme.carouselPaddingBottom +import it.inps.sirio.theme.carouselPaddingIntra +import it.inps.sirio.theme.carouselPaddingTop +import it.inps.sirio.theme.carouselPageSpacing +import it.inps.sirio.ui.card.SirioCardItemData +import it.inps.sirio.ui.card.SirioProcessCard +import kotlinx.coroutines.launch + +/** + * A Composable function that renders a carousel with the provided items + * + * @param items A list of items to be displayed in the carousel. + * @param index The index of the initially selected item. Default is 0. + * @param background The background style for the carousel. + * @param key a stable and unique key representing the item. When you specify the key the scroll + * position will be maintained based on the key, which means if you add/remove items before the + * current visible item the item with the given key will be kept as the first visible one. @see [HorizontalPager] + * @param content The Composable function to render each item in the carousel. + */ +@Composable +internal fun SirioCarouselCommon( + items: List, + index: Int = 0, + background: SirioCarouselBackground, + key: ((index: Int) -> Any)? = null, + content: @Composable (T) -> Unit, +) { + val backgroundColor = when (background) { + SirioCarouselBackground.LIGHT -> SirioTheme.colors.carousel.backgroundLight + SirioCarouselBackground.MEDIUM -> SirioTheme.colors.carousel.backgroundMedium + } + Column( + Modifier + .background(backgroundColor) + .padding(top = carouselPaddingTop.dp, bottom = carouselPaddingBottom.dp), + ) { + val coroutineScope = rememberCoroutineScope() + val pagerState = rememberPagerState( + initialPage = index, + initialPageOffsetFraction = 0f, + pageCount = { items.size } + ) + HorizontalPager( + state = pagerState, + contentPadding = PaddingValues(horizontal = carouselContentPaddingHorizontal.dp), + key = key, + pageSpacing = carouselPageSpacing.dp, + ) { content(items[it]) } + Spacer(modifier = Modifier.height(carouselPaddingIntra.dp)) + SirioCarouselIndicator(pagerState) { coroutineScope.launch { pagerState.scrollToPage(it) } } + } +} + +@Composable +private fun SirioCarouselIndicator(pagerState: PagerState, onIndexClick: (Int) -> Unit) { + Row( + Modifier + .wrapContentHeight() + .fillMaxWidth() + .padding(bottom = 8.dp), + horizontalArrangement = Arrangement.spacedBy( + carouselIndicatorPaddingIntra.dp, + Alignment.CenterHorizontally, + ), + ) { + repeat(pagerState.pageCount) { iteration -> + val (color, width) = + if (pagerState.currentPage == iteration) { + Pair( + SirioTheme.colors.carousel.indicator.dotSelected, + 2 * carouselIndicatorSize, + ) + } else { + Pair(SirioTheme.colors.carousel.indicator.dotUnselected, carouselIndicatorSize) + } + Box( + modifier = Modifier + .clickable { onIndexClick(iteration) } + .padding(carouselIndicatorPaddingInner.dp) + .clip(CircleShape) + .background(color) + .animateContentSize() + .size(height = carouselIndicatorSize.dp, width = width.dp) + ) + } + } +} + +@Keep +data class SirioCarouselColors( + val indicator: SirioCarouselIndicatorColors, + val backgroundLight: Color, + val backgroundMedium: Color, +) { + companion object { + @Stable + val Unspecified = SirioCarouselColors( + indicator = SirioCarouselIndicatorColors.Unspecified, + backgroundLight = Color.Unspecified, + backgroundMedium = Color.Unspecified, + ) + } +} + +@Keep +data class SirioCarouselIndicatorColors( + val dotUnselected: Color, + val dotSelected: Color, +) { + companion object { + @Stable + val Unspecified = SirioCarouselIndicatorColors( + dotUnselected = Color.Unspecified, + dotSelected = Color.Unspecified, + ) + } +} + +@Preview(showSystemUi = true) +@Composable +private fun SirioCarouselCommonPreview() { + data class CarouselSampleData( + val icon: FaIconType, + val date: String, + val title: String, + val text: String, + val button: String, + ) + + val samples = listOf( + CarouselSampleData( + icon = FaIcons.Book, + date = "13 Nov 2021", + title = "Titolo della card 1", + text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + button = "Text" + ), + CarouselSampleData( + icon = FaIcons.Book, + date = "13 Nov 2021", + title = "Titolo della card 2", + text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + button = "Text" + ), + CarouselSampleData( + icon = FaIcons.Book, + date = "13 Nov 2021", + title = "Titolo della card 3", + text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + button = "Text" + ), + CarouselSampleData( + icon = FaIcons.Book, + date = "13 Nov 2021", + title = "Titolo della card 4", + text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + button = "Text" + ), + ) + SirioTheme { + SirioCarouselCommon( + items = samples, + index = 0, + background = SirioCarouselBackground.MEDIUM, + ) { sample -> + SirioProcessCard( + title = sample.title, + text = sample.text, + buttonText = sample.button, + icon = sample.icon, + onClickButton = {}, + date = sample.date, + item = SirioCardItemData(icon = FaIcons.EllipsisH, action = {}), + onClickCard = {}, + ) + } + } +} \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckbox.kt b/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckbox.kt index 74c4803..62cdc9f 100644 --- a/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckbox.kt +++ b/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckbox.kt @@ -30,8 +30,8 @@ fun SirioCheckbox( onCheckedChange: (Boolean) -> Unit, ) { SirioCheckboxCommon( - text = text, checked = checked, + text = text, enabled = enabled, onCheckedChange = onCheckedChange, ) @@ -53,8 +53,8 @@ fun SirioCheckbox( onCheckedChange: (Boolean) -> Unit, ) { SirioCheckboxCommon( - text = text, checked = checked, + text = text, enabled = enabled, onCheckedChange = onCheckedChange, ) diff --git a/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckboxCommon.kt b/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckboxCommon.kt index 6423b07..e1cd739 100644 --- a/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckboxCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/checkbox/SirioCheckboxCommon.kt @@ -8,6 +8,7 @@ package it.inps.sirio.ui.checkbox +import androidx.annotation.Keep import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.focusable @@ -18,12 +19,16 @@ import androidx.compose.foundation.interaction.collectIsPressedAsState import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.selection.toggleable import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -32,15 +37,19 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.semantics.Role import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import com.guru.fontawesomecomposelib.FaIcons +import it.inps.sirio.theme.SirioColorState import it.inps.sirio.theme.SirioTheme import it.inps.sirio.theme.checkboxBorderWidth import it.inps.sirio.theme.checkboxCheckSize import it.inps.sirio.theme.checkboxCornerRadius import it.inps.sirio.theme.checkboxFocusBorderPadding import it.inps.sirio.theme.checkboxFocusExtraBorderWidth -import it.inps.sirio.theme.checkboxSafeAreaPadding +import it.inps.sirio.theme.checkboxPaddingText import it.inps.sirio.theme.checkboxSize import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon @@ -55,56 +64,21 @@ import it.inps.sirio.utils.SirioIcon */ @Composable internal fun SirioCheckboxCommon( - text: String? = null, checked: Boolean, + text: String? = null, enabled: Boolean = true, + overflow: TextOverflow = TextOverflow.Clip, + maxLines: Int = Int.MAX_VALUE, onCheckedChange: (Boolean) -> Unit, ) { - val interactionSource = remember { MutableInteractionSource() } - val isPressed by interactionSource.collectIsPressedAsState() - val isFocused by interactionSource.collectIsFocusedAsState() - val isHovered by interactionSource.collectIsHoveredAsState() - - val borderColor = if (!enabled) SirioTheme.colors.checkboxDisabled else when { - isFocused -> SirioTheme.colors.checkboxFocusContent - isPressed -> SirioTheme.colors.checkboxPressed - isHovered -> SirioTheme.colors.checkboxHoverContent - else -> SirioTheme.colors.checkboxPressed - } - val textColor = - if (!enabled) SirioTheme.colors.checkboxDisabledContent else if (checked) SirioTheme.colors.checkboxPressedText else borderColor - val checkColor = - if (enabled) SirioTheme.colors.checkboxPressed else SirioTheme.colors.checkboxDisabledContent - - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier - .focusable(enabled = enabled, interactionSource = interactionSource) - .toggleable( - value = checked, - interactionSource = interactionSource, - indication = null, - role = Role.Checkbox, - enabled = enabled - ) { - onCheckedChange(it) - } + SirioCheckboxWithText( + checked = checked, + text = text, + enabled = enabled, + overflow = overflow, + maxLines = maxLines, + onCheckedChange = onCheckedChange, ) - { - CustomCheckbox( - checked = checked, - checkColor = checkColor, - isFocused = isFocused, - borderColor = borderColor - ) - text?.let { - SirioTextCommon( - text = it, - color = textColor, - typography = SirioTheme.typography.checkboxLabelText, - ) - } - } } /** @@ -117,9 +91,31 @@ internal fun SirioCheckboxCommon( */ @Composable internal fun SirioCheckboxCommon( + checked: Boolean, text: AnnotatedString, + enabled: Boolean = true, + overflow: TextOverflow = TextOverflow.Clip, + maxLines: Int = Int.MAX_VALUE, + onCheckedChange: (Boolean) -> Unit, +) { + SirioCheckboxWithText( + checked = checked, + annotatedText = text, + enabled = enabled, + overflow = overflow, + maxLines = maxLines, + onCheckedChange = onCheckedChange, + ) +} + +@Composable +private fun SirioCheckboxWithText( checked: Boolean, + text: String? = null, + annotatedText: AnnotatedString? = null, enabled: Boolean = true, + overflow: TextOverflow = TextOverflow.Clip, + maxLines: Int = Int.MAX_VALUE, onCheckedChange: (Boolean) -> Unit, ) { val interactionSource = remember { MutableInteractionSource() } @@ -127,16 +123,14 @@ internal fun SirioCheckboxCommon( val isFocused by interactionSource.collectIsFocusedAsState() val isHovered by interactionSource.collectIsHoveredAsState() - val borderColor = if (!enabled) SirioTheme.colors.checkboxDisabled else when { - isFocused -> SirioTheme.colors.checkboxFocusContent - isPressed -> SirioTheme.colors.checkboxPressed - isHovered -> SirioTheme.colors.checkboxHoverContent - else -> SirioTheme.colors.checkboxPressed - } + val backgroundColor = + SirioTheme.colors.checkbox.background.get(enabled.not(), isFocused, isPressed, isHovered) + val borderColor = + SirioTheme.colors.checkbox.border.get(enabled.not(), isFocused, isPressed, isHovered) val textColor = - if (!enabled) SirioTheme.colors.checkboxDisabledContent else if (checked) SirioTheme.colors.checkboxPressedText else borderColor + SirioTheme.colors.checkbox.text.get(enabled.not(), isFocused, isPressed, isHovered) val checkColor = - if (enabled) SirioTheme.colors.checkboxPressed else SirioTheme.colors.checkboxDisabledContent + SirioTheme.colors.checkbox.check.get(enabled.not(), isFocused, isPressed, isHovered) Row( verticalAlignment = Alignment.CenterVertically, @@ -154,16 +148,30 @@ internal fun SirioCheckboxCommon( ) { CustomCheckbox( + backgroundColor = backgroundColor, checked = checked, checkColor = checkColor, isFocused = isFocused, borderColor = borderColor ) - SirioTextCommon( - text = text, - color = textColor, - typography = SirioTheme.typography.checkboxLabelText, - ) + text?.let { + Spacer(modifier = Modifier.width(checkboxPaddingText.dp)) + SirioTextCommon( + text = it, + color = textColor, + overflow = overflow, + maxLines = maxLines, + typography = SirioTheme.typography.checkbox.text, + ) + } ?: annotatedText?.let { + SirioTextCommon( + text = it, + color = textColor, + overflow = overflow, + maxLines = maxLines, + typography = SirioTheme.typography.checkbox.text, + ) + } } } @@ -177,6 +185,7 @@ internal fun SirioCheckboxCommon( */ @Composable private fun CustomCheckbox( + backgroundColor: Color, checked: Boolean, isFocused: Boolean, checkColor: Color, @@ -187,36 +196,36 @@ private fun CustomCheckbox( } val size = Modifier - .padding(checkboxSafeAreaPadding) - .size(checkboxSize) + .size(checkboxSize.dp) + .minimumInteractiveComponentSize() Box( modifier = if (isFocused) { size .border( - checkboxFocusExtraBorderWidth, - color = SirioTheme.colors.checkboxFocusBorder, - shape = RoundedCornerShape(checkboxCornerRadius), + checkboxFocusExtraBorderWidth.dp, + color = SirioTheme.colors.checkbox.borderFocusExtra, + shape = RoundedCornerShape(checkboxCornerRadius.dp), ) - .padding(focusPadding) + .padding(focusPadding.dp) } else size, contentAlignment = Alignment.Center, ) { Box( modifier = Modifier - .clip(RoundedCornerShape(checkboxCornerRadius)) + .clip(RoundedCornerShape(checkboxCornerRadius.dp)) .fillMaxSize() .border( - width = checkboxBorderWidth, + width = checkboxBorderWidth.dp, color = borderColor, - shape = RoundedCornerShape(checkboxCornerRadius) + shape = RoundedCornerShape(checkboxCornerRadius.dp) ) - .background(SirioTheme.colors.checkboxBackground), + .background(backgroundColor), contentAlignment = Alignment.Center ) { if (checked) { SirioIcon( faIcon = FaIcons.Check, - size = checkboxCheckSize, + size = checkboxCheckSize.dp, iconColor = checkColor, ) } @@ -224,20 +233,61 @@ private fun CustomCheckbox( } } +@Keep +data class SirioCheckboxColors( + val background: SirioColorState, + val border: SirioColorState, + val borderFocusExtra: Color, + val check: SirioColorState, + val text: SirioColorState, +) { + companion object { + @Stable + val Unspecified = SirioCheckboxColors( + background = SirioColorState.Unspecified, + border = SirioColorState.Unspecified, + borderFocusExtra = Color.Unspecified, + check = SirioColorState.Unspecified, + text = SirioColorState.Unspecified, + ) + } +} + +@Keep +data class SirioCheckboxTypography( + val text: TextStyle, +) { + companion object { + @Stable + val Default = SirioCheckboxTypography( + text = TextStyle.Default, + ) + } +} + @Preview @Composable private fun CheckboxCommonPreview() { SirioTheme { - Column(Modifier.background(Color(0xFFE5E5E5))) { + Column(Modifier.background(Color.White)) { val text = "Title" - SirioCheckboxCommon(checked = false, onCheckedChange = {}, enabled = true) - SirioCheckboxCommon(checked = true, onCheckedChange = {}, enabled = true) - SirioCheckboxCommon(checked = false, onCheckedChange = {}, enabled = false) - SirioCheckboxCommon(checked = true, onCheckedChange = {}, enabled = false) - SirioCheckboxCommon(text = text, checked = false, onCheckedChange = {}, enabled = true) - SirioCheckboxCommon(text = text, checked = true, onCheckedChange = {}, enabled = true) - SirioCheckboxCommon(text = text, checked = false, onCheckedChange = {}, enabled = false) - SirioCheckboxCommon(text = text, checked = true, onCheckedChange = {}, enabled = false) + SirioCheckboxCommon(checked = false, enabled = true) {} + SirioCheckboxCommon(checked = true, enabled = true) {} + SirioCheckboxCommon(checked = false, enabled = false) {} + SirioCheckboxCommon(checked = true, enabled = false) {} + SirioCheckboxCommon(checked = false, text = text, enabled = true) {} + SirioCheckboxCommon(checked = true, text = text, enabled = true) {} + SirioCheckboxCommon(checked = false, text = text, enabled = false) {} + SirioCheckboxCommon(checked = true, text = text, enabled = false) {} + } + } +} + +@Preview +@Composable +private fun SirioCustomCheckboxPreview() { + SirioTheme { + Column { } } } diff --git a/design/src/main/java/it/inps/sirio/ui/chip/ChipCommon.kt b/design/src/main/java/it/inps/sirio/ui/chip/ChipCommon.kt index e68dc38..2207229 100644 --- a/design/src/main/java/it/inps/sirio/ui/chip/ChipCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/chip/ChipCommon.kt @@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -156,7 +157,8 @@ internal fun ChipCommon( text = text, modifier = Modifier .wrapContentHeight() - .weight(1f, false), + .weight(1f, false) + .offset(y = (-2).dp), color = contentColor, overflow = TextOverflow.Ellipsis, maxLines = 1, @@ -411,4 +413,4 @@ private fun ChipCommonPreview() { onStateChange = {}) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/dialog/SirioDialogCommon.kt b/design/src/main/java/it/inps/sirio/ui/dialog/SirioDialogCommon.kt index a3568bf..83ab062 100644 --- a/design/src/main/java/it/inps/sirio/ui/dialog/SirioDialogCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/dialog/SirioDialogCommon.kt @@ -196,12 +196,12 @@ private fun Modifier.placeToBottom() = layout { measurable, constraints -> @Keep data class SirioDialogColors( - var background: Color, - var semanticDefault: Color, - var semanticAlert: Color, - var semanticWarning: Color, - var title: Color, - var text: Color, + val background: Color, + val semanticDefault: Color, + val semanticAlert: Color, + val semanticWarning: Color, + val title: Color, + val text: Color, ) { companion object { @Stable @@ -247,4 +247,4 @@ fun SirioDialogPreview() { onDismiss = {}, ) } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/fab/FabCommon.kt b/design/src/main/java/it/inps/sirio/ui/fab/FabCommon.kt index f863f0f..59fda17 100644 --- a/design/src/main/java/it/inps/sirio/ui/fab/FabCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/fab/FabCommon.kt @@ -10,11 +10,21 @@ package it.inps.sirio.ui.fab import androidx.compose.foundation.border import androidx.compose.foundation.focusable -import androidx.compose.foundation.interaction.* -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsFocusedAsState +import androidx.compose.foundation.interaction.collectIsHoveredAsState +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.sizeIn +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CornerSize -import androidx.compose.material.MaterialTheme import androidx.compose.material3.FloatingActionButton +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember @@ -22,8 +32,20 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview -import com.guru.fontawesomecomposelib.* -import it.inps.sirio.theme.* +import com.guru.fontawesomecomposelib.FaIconType +import com.guru.fontawesomecomposelib.FaIcons +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.fabCornerSizePercent +import it.inps.sirio.theme.fabExtendedFocusedBorderPadding +import it.inps.sirio.theme.fabExtendedHorizontalPadding +import it.inps.sirio.theme.fabExtendedSpacerWidth +import it.inps.sirio.theme.fabExtendedVerticalPadding +import it.inps.sirio.theme.fabFocusedBorderPadding +import it.inps.sirio.theme.fabFocusedBorderWidth +import it.inps.sirio.theme.fabIconSize +import it.inps.sirio.theme.fabRegularPadding +import it.inps.sirio.theme.fabSmallPadding +import it.inps.sirio.theme.fabSmallSize import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon diff --git a/design/src/main/java/it/inps/sirio/ui/fileupload/FileUploadCommon.kt b/design/src/main/java/it/inps/sirio/ui/fileupload/FileUploadCommon.kt index 745b85b..998af0e 100644 --- a/design/src/main/java/it/inps/sirio/ui/fileupload/FileUploadCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/fileupload/FileUploadCommon.kt @@ -6,21 +6,26 @@ // SPDX-License-Identifier: BSD-3-Clause // +@file:OptIn(ExperimentalLayoutApi::class) + package it.inps.sirio.ui.fileupload import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ExperimentalLayoutApi +import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview -import com.google.accompanist.flowlayout.FlowMainAxisAlignment -import com.google.accompanist.flowlayout.FlowRow +import androidx.compose.ui.unit.dp import com.guru.fontawesomecomposelib.FaIcons import it.inps.sirio.theme.SirioTheme import it.inps.sirio.theme.fileUploadItemsPadding @@ -60,7 +65,7 @@ internal fun FileUploadCommon( color = SirioTheme.colors.fileUploadTitle, typography = SirioTheme.typography.sliderTitle, ) - Spacer(modifier = Modifier.height(fileUploadTitlePaddingBottom)) + Spacer(modifier = Modifier.height(fileUploadTitlePaddingBottom.dp)) } text?.let { SirioTextCommon( @@ -68,7 +73,7 @@ internal fun FileUploadCommon( color = SirioTheme.colors.fileUploadText, typography = SirioTheme.typography.sliderText, ) - Spacer(modifier = Modifier.height(fileUploadTextPaddingBottom)) + Spacer(modifier = Modifier.height(fileUploadTextPaddingBottom.dp)) } SirioButton( text = "Upload", @@ -78,15 +83,17 @@ internal fun FileUploadCommon( size = ButtonSize.Large, style = ButtonStyle.Primary, ) - Spacer(modifier = Modifier.height(fileUploadItemsPadding)) + Spacer(modifier = Modifier.height(fileUploadItemsPadding.dp)) FlowRow( modifier = Modifier .fillMaxWidth() .wrapContentHeight(), - mainAxisSpacing = fileUploadItemsPadding, - crossAxisSpacing = fileUploadItemsPadding, - mainAxisAlignment = FlowMainAxisAlignment.Start, - lastLineMainAxisAlignment = FlowMainAxisAlignment.Start, + horizontalArrangement = Arrangement.spacedBy( + fileUploadItemsPadding.dp, + Alignment.Start + ), + verticalArrangement = Arrangement.spacedBy(fileUploadItemsPadding.dp, Alignment.Top), +// lastLineMainAxisAlignment = FlowMainAxisAlignment.Start, ) { uploadList.forEachIndexed { index, item -> ChipLabelClose( @@ -110,10 +117,16 @@ private fun FileUploadCommonPreview() { title = "Label", text = "*Info upload file", enabled = true, - uploadList = listOf("Nome file", "Nome file 2"), + uploadList = listOf( + "Nome file", + "Nome file 2", + "Nome file 3", + "Nome file 4", + "Nome file 5" + ), onDeleteClick = { _, _ -> }, onUploadClick = {} ) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/hero/SirioHero.kt b/design/src/main/java/it/inps/sirio/ui/hero/SirioHero.kt new file mode 100644 index 0000000..4785041 --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/hero/SirioHero.kt @@ -0,0 +1,71 @@ +// +// SirioHero.kt +// +// SPDX-FileCopyrightText: 2024 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// +package it.inps.sirio.ui.hero + +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import it.inps.sirio.theme.SirioTheme + +/** + * Sirio Hero implementation + * @param title The title of the hero. + * @param text The text content of the hero. + * @param modifier The [Modifier] for the hero (optional). + * @param imageUrl The url of the remote image. + * @param imageContentDescriptor The content descriptor associated with the image + * @param subtitle The subtitle of the hero (optional). + * @param buttonText The text for the button (optional). + * @param onButtonClick The action to be performed when the button is clicked (optional). + * @param onHeroClick The action to be performed when the hero is clicked (optional). + */ +@Composable +fun SirioHero( + title: String, + text: String, + modifier: Modifier = Modifier, + imageUrl: (String)? = null, + imageContentDescriptor: String? = null, + subtitle: String? = null, + buttonText: String? = null, + onButtonClick: () -> Unit, + onHeroClick: () -> Unit, +) { + SirioHeroCommon( + title = title, + text = text, + modifier = modifier, + imageUrl = imageUrl, + imageContentDescriptor = imageContentDescriptor, + subtitle = subtitle, + buttonText = buttonText, + onButtonClick = onButtonClick, + onHeroClick = onHeroClick, + ) +} + + +@Preview(showSystemUi = true, backgroundColor = 0xFF888888) +@Composable +private fun SirioHeroPreview() { + SirioTheme(darkTheme = true) { + val heroTitleValue = "Titolo Hero" + val heroSubtitleValue = "Sottotitolo" + val heroTextValue = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." + val heroButtonText = "Text" + SirioHeroCommon( + title = heroTitleValue, + text = heroTextValue, + imageUrl = "https://www.google.it/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png", + onHeroClick = {}, + subtitle = heroSubtitleValue, + buttonText = heroButtonText, + ) + } +} diff --git a/design/src/main/java/it/inps/sirio/ui/hero/SirioHeroCommon.kt b/design/src/main/java/it/inps/sirio/ui/hero/SirioHeroCommon.kt new file mode 100644 index 0000000..f9f919e --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/hero/SirioHeroCommon.kt @@ -0,0 +1,197 @@ +// +// SirioHeroCommon.kt +// +// SPDX-FileCopyrightText: 2024 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// + +package it.inps.sirio.ui.hero + +import androidx.annotation.Keep +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import coil.compose.AsyncImage +import coil.decode.SvgDecoder +import coil.request.ImageRequest +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.heroImageHeight +import it.inps.sirio.theme.heroImagePaddingBottomLong +import it.inps.sirio.theme.heroImagePaddingBottomShort +import it.inps.sirio.theme.heroPaddingHorizontal +import it.inps.sirio.theme.heroPaddingVertical +import it.inps.sirio.theme.heroSubtitlePaddingTop +import it.inps.sirio.theme.heroTextPaddingBottom +import it.inps.sirio.theme.heroTextPaddingTop +import it.inps.sirio.ui.button.ButtonSize +import it.inps.sirio.ui.button.ButtonStyle +import it.inps.sirio.ui.button.SirioButton +import it.inps.sirio.ui.text.SirioText + +/** + * Sirio Hero common implementation + * @param title The title of the hero. + * @param text The text content of the hero. + * @param modifier The [Modifier] for the hero (optional). + * @param imageUrl The url of the remote image. + * @param imageContentDescriptor The content descriptor associated with the image + * @param subtitle The subtitle of the hero (optional). + * @param buttonText The text for the button (optional). + * @param onButtonClick The action to be performed when the button is clicked (optional). + * @param onHeroClick The action to be performed when the hero is clicked (optional). + */ +@Composable +internal fun SirioHeroCommon( + title: String, + text: String, + modifier: Modifier = Modifier, + imageUrl: (String)? = null, + imageContentDescriptor: String? = null, + subtitle: String? = null, + buttonText: String? = null, + onButtonClick: () -> Unit = {}, + onHeroClick: () -> Unit = {}, +) { + Card( + onClick = onHeroClick, + modifier = modifier, + shape = RoundedCornerShape(0.dp), + colors = CardDefaults.cardColors(containerColor = SirioTheme.colors.hero.background), + ) { + Column( + Modifier + .padding( + start = heroPaddingHorizontal.dp, + end = heroPaddingHorizontal.dp, + top = heroPaddingVertical.dp, + ) + ) { + SirioText( + text = title, + color = SirioTheme.colors.hero.title, + maxLines = 2, + typography = SirioTheme.typography.hero.title, + ) + subtitle?.let { + SirioText( + text = subtitle, + modifier = Modifier.padding(top = heroSubtitlePaddingTop.dp), + color = SirioTheme.colors.hero.subtitle, + maxLines = 1, + typography = SirioTheme.typography.hero.subtitle, + ) + } + SirioText( + text = text, + modifier = Modifier.padding( + top = heroTextPaddingTop.dp, + bottom = heroTextPaddingBottom.dp + ), + color = SirioTheme.colors.hero.text, + maxLines = 4, + typography = SirioTheme.typography.hero.text, + ) + buttonText?.let { + SirioButton( + modifier = Modifier.padding(bottom = if (imageUrl != null) heroImagePaddingBottomShort.dp else heroImagePaddingBottomLong.dp), + text = it, + size = ButtonSize.Large, + style = ButtonStyle.Tertiary, + onClick = onButtonClick, + ) + } + imageUrl?.let { + AsyncImage( + model = ImageRequest.Builder(LocalContext.current) + .data(imageUrl) + .decoderFactory(SvgDecoder.Factory()) + .build(), + contentDescription = imageContentDescriptor, + modifier = Modifier + .fillMaxWidth() + .height(heroImageHeight.dp), + contentScale = ContentScale.Fit, + ) + } + } + Box( + modifier = Modifier + .fillMaxWidth() + .height(1.dp) + .background(SirioTheme.colors.hero.borderBottom) + ) + } +} + + +@Keep +data class SirioHeroColors( + val background: Color, + val title: Color, + val subtitle: Color, + val text: Color, + val borderBottom: Color, +) { + companion object { + @Stable + val Unspecified = SirioHeroColors( + background = Color.Unspecified, + title = Color.Unspecified, + subtitle = Color.Unspecified, + text = Color.Unspecified, + borderBottom = Color.Unspecified, + ) + } +} + +@Keep +data class SirioHeroTypography( + val title: TextStyle, + val subtitle: TextStyle, + val text: TextStyle, +) { + companion object { + @Stable + val Default = SirioHeroTypography( + title = TextStyle.Default, + subtitle = TextStyle.Default, + text = TextStyle.Default, + ) + } +} + +@Preview(showSystemUi = true, backgroundColor = 0xFF888888) +@Composable +private fun SirioHeroCommonPreview() { + SirioTheme { + val heroTitleValue = "Titolo Hero" + val heroSubtitleValue = "Sottotitolo" + val heroTextValue = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." + val heroButtonText = "Text" + SirioHeroCommon( + title = heroTitleValue, + text = heroTextValue, + imageUrl = "https://www.google.it/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png", + onHeroClick = {}, + subtitle = heroSubtitleValue, + buttonText = heroButtonText, + ) + } +} \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/ui/notification/NotificationInlineCommon.kt b/design/src/main/java/it/inps/sirio/ui/notification/NotificationInlineCommon.kt index e591560..fc28cf6 100644 --- a/design/src/main/java/it/inps/sirio/ui/notification/NotificationInlineCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/notification/NotificationInlineCommon.kt @@ -9,7 +9,15 @@ package it.inps.sirio.ui.notification import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.material3.IconButton import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -21,7 +29,14 @@ import androidx.compose.ui.semantics.semantics import androidx.compose.ui.tooling.preview.Preview import com.guru.fontawesomecomposelib.FaIconType import com.guru.fontawesomecomposelib.FaIcons -import it.inps.sirio.theme.* +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.notificationInlineCloseSize +import it.inps.sirio.theme.notificationInlineHeight +import it.inps.sirio.theme.notificationInlineHorizontalPadding +import it.inps.sirio.theme.notificationInlineIconSize +import it.inps.sirio.theme.notificationInlineStateWidth +import it.inps.sirio.theme.notificationInlineVerticalPadding +import it.inps.sirio.theme.notificationInlineVerticalSpacer import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon diff --git a/design/src/main/java/it/inps/sirio/ui/notification/NotificationToast.kt b/design/src/main/java/it/inps/sirio/ui/notification/NotificationToast.kt index 0e6332d..a409695 100644 --- a/design/src/main/java/it/inps/sirio/ui/notification/NotificationToast.kt +++ b/design/src/main/java/it/inps/sirio/ui/notification/NotificationToast.kt @@ -9,7 +9,11 @@ package it.inps.sirio.ui.notification import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding import androidx.compose.material3.SnackbarDuration import androidx.compose.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState diff --git a/design/src/main/java/it/inps/sirio/ui/pagination/PaginationCommon.kt b/design/src/main/java/it/inps/sirio/ui/pagination/PaginationCommon.kt index b77392d..42c8097 100644 --- a/design/src/main/java/it/inps/sirio/ui/pagination/PaginationCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/pagination/PaginationCommon.kt @@ -271,10 +271,10 @@ data class PaginationParams( @Keep data class SirioPaginationColors( - var background: Color, - var tile: SirioColorState, - var number: SirioColorState, - var tileBorder: SirioColorState, + val background: Color, + val tile: SirioColorState, + val number: SirioColorState, + val tileBorder: SirioColorState, ) { companion object { @Stable @@ -302,4 +302,4 @@ private fun PaginationCommonPreview() { PaginationCommon(numberOfPages = 10, onPageChanged = {}) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/radiobutton/SirioRadioButtonCommon.kt b/design/src/main/java/it/inps/sirio/ui/radiobutton/SirioRadioButtonCommon.kt index d436e2a..0cd815a 100644 --- a/design/src/main/java/it/inps/sirio/ui/radiobutton/SirioRadioButtonCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/radiobutton/SirioRadioButtonCommon.kt @@ -7,6 +7,7 @@ // package it.inps.sirio.ui.radiobutton +import androidx.annotation.Keep import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.focusable @@ -14,10 +15,16 @@ import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.collectIsFocusedAsState import androidx.compose.foundation.interaction.collectIsHoveredAsState import androidx.compose.foundation.interaction.collectIsPressedAsState -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -25,8 +32,16 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.semantics.Role +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview -import it.inps.sirio.theme.* +import it.inps.sirio.theme.SirioColorState +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.radioBorderWidth +import it.inps.sirio.theme.radioDotSize +import it.inps.sirio.theme.radioFocusBorderPadding +import it.inps.sirio.theme.radioFocusExtraBorderWidth +import it.inps.sirio.theme.radioSafeAreaPadding +import it.inps.sirio.theme.radioSize import it.inps.sirio.ui.text.SirioTextCommon /** @@ -49,16 +64,14 @@ internal fun SirioRadioButtonCommon( val isFocused by interactionSource.collectIsFocusedAsState() val isHovered by interactionSource.collectIsHoveredAsState() - val borderColor = if (!enabled) SirioTheme.colors.radioDisabledBorder else when { - isFocused -> SirioTheme.colors.radioFocus - isPressed -> SirioTheme.colors.radioPressed - isHovered -> SirioTheme.colors.radioHover - else -> SirioTheme.colors.radioDefault - } - val dotColor = - if (enabled) SirioTheme.colors.radioPressed else SirioTheme.colors.radioDisabled + val backgroundColor = + SirioTheme.colors.radio.background.get(enabled.not(), isFocused, isPressed, isHovered) + val borderColor = + SirioTheme.colors.radio.border.get(enabled.not(), isFocused, isPressed, isHovered) val textColor = - if (!enabled) SirioTheme.colors.radioDisabled else borderColor + SirioTheme.colors.radio.text.get(enabled.not(), isFocused, isPressed, isHovered) + val dotColor = + SirioTheme.colors.radio.dot.get(enabled.not(), isFocused, isPressed, isHovered) Row( verticalAlignment = Alignment.CenterVertically, @@ -77,6 +90,7 @@ internal fun SirioRadioButtonCommon( CustomRadioButton( selected = isSelected, isFocused = isFocused, + backgroundColor = backgroundColor, dotColor = dotColor, borderColor = borderColor ) @@ -84,7 +98,7 @@ internal fun SirioRadioButtonCommon( SirioTextCommon( text = it, color = textColor, - typography = SirioTheme.typography.radioLabelText, + typography = SirioTheme.typography.radio.text, ) } } @@ -102,6 +116,7 @@ internal fun SirioRadioButtonCommon( private fun CustomRadioButton( selected: Boolean, isFocused: Boolean, + backgroundColor: Color, dotColor: Color, borderColor: Color, ) { @@ -117,7 +132,7 @@ private fun CustomRadioButton( size .border( radioFocusExtraBorderWidth, - color = SirioTheme.colors.radioFocusBorder, + color = SirioTheme.colors.radio.borderFocusExtra, shape = CircleShape, ) .padding(focusPadding) @@ -129,7 +144,7 @@ private fun CustomRadioButton( .clip(CircleShape) .fillMaxSize() .border(width = radioBorderWidth, color = borderColor, shape = CircleShape) - .background(SirioTheme.colors.radioBackground), + .background(backgroundColor), contentAlignment = Alignment.Center ) { if (selected) { @@ -143,12 +158,43 @@ private fun CustomRadioButton( } } +@Keep +data class SirioRadioButtonColors( + val background: SirioColorState, + val border: SirioColorState, + val borderFocusExtra: Color, + val dot: SirioColorState, + val text: SirioColorState, +) { + companion object { + @Stable + val Unspecified = SirioRadioButtonColors( + background = SirioColorState.Unspecified, + border = SirioColorState.Unspecified, + borderFocusExtra = Color.Unspecified, + dot = SirioColorState.Unspecified, + text = SirioColorState.Unspecified, + ) + } +} + +@Keep +data class SirioRadioButtonTypography( + val text: TextStyle, +) { + companion object { + @Stable + val Default = SirioRadioButtonTypography( + text = TextStyle.Default, + ) + } +} @Preview @Composable private fun RadioCommonPreview() { SirioTheme { - Column(Modifier.background(Color(0xFFE5E5E5))) { + Column(Modifier.background(Color.White)) { val text = "Title" SirioRadioButtonCommon(isSelected = false, onClick = {}, enabled = true) SirioRadioButtonCommon(isSelected = true, onClick = {}, enabled = true) diff --git a/design/src/main/java/it/inps/sirio/ui/searchbar/SirioSearchBarCommon.kt b/design/src/main/java/it/inps/sirio/ui/searchbar/SirioSearchBarCommon.kt index 2a64dcb..5316a32 100644 --- a/design/src/main/java/it/inps/sirio/ui/searchbar/SirioSearchBarCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/searchbar/SirioSearchBarCommon.kt @@ -6,24 +6,40 @@ // SPDX-License-Identifier: BSD-3-Clause // +@file:OptIn(ExperimentalLayoutApi::class) + package it.inps.sirio.ui.searchbar import androidx.annotation.Keep import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ExperimentalLayoutApi +import androidx.compose.foundation.layout.FlowRow +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateListOf +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import com.google.accompanist.flowlayout.FlowMainAxisAlignment -import com.google.accompanist.flowlayout.FlowRow import com.guru.fontawesomecomposelib.FaIcons import it.inps.sirio.theme.SirioTheme import it.inps.sirio.theme.searchBarQueriesPadding @@ -119,15 +135,14 @@ internal fun SirioSearchBarCommon( }), ) if (showChips) { - Spacer(modifier = Modifier.height(searchBarQueriesVerticalPadding)) + Spacer(modifier = Modifier.height(searchBarQueriesVerticalPadding.dp)) FlowRow( modifier = Modifier .fillMaxWidth() .wrapContentHeight(), - mainAxisSpacing = searchBarQueriesPadding, - crossAxisSpacing = searchBarQueriesPadding, - mainAxisAlignment = FlowMainAxisAlignment.Start, - lastLineMainAxisAlignment = FlowMainAxisAlignment.Start, + horizontalArrangement = Arrangement.spacedBy(searchBarQueriesPadding.dp, Alignment.Start), + verticalArrangement = Arrangement.spacedBy(searchBarQueriesPadding.dp, Alignment.Top) +// lastLineMainAxisAlignment = FlowMainAxisAlignment.Start, ) { chips.forEachIndexed { index, item -> ChipLabelClose(label = item, enabled = enabled) { @@ -142,7 +157,7 @@ internal fun SirioSearchBarCommon( @Keep data class SirioSearchBarColors( - var background: Color, + val background: Color, ) { companion object { @Stable @@ -182,4 +197,4 @@ private fun SearchBarCommonPreview() { ) } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/slider/SirioSliderCommon.kt b/design/src/main/java/it/inps/sirio/ui/slider/SirioSliderCommon.kt index c38eafa..5584864 100644 --- a/design/src/main/java/it/inps/sirio/ui/slider/SirioSliderCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/slider/SirioSliderCommon.kt @@ -14,13 +14,31 @@ import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.collectIsFocusedAsState import androidx.compose.foundation.interaction.collectIsHoveredAsState import androidx.compose.foundation.interaction.collectIsPressedAsState -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material3.* -import androidx.compose.runtime.* +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Slider +import androidx.compose.material3.SliderDefaults +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.focus.onFocusChanged @@ -32,7 +50,16 @@ import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import it.inps.sirio.theme.* +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.sliderTextFieldBorderWidth +import it.inps.sirio.theme.sliderTextFieldCornerRadius +import it.inps.sirio.theme.sliderTextFieldFocusExtraBorderPadding +import it.inps.sirio.theme.sliderTextFieldFocusExtraBorderWidth +import it.inps.sirio.theme.sliderTextFieldHeight +import it.inps.sirio.theme.sliderTextFieldPaddingStart +import it.inps.sirio.theme.sliderTextFieldWidth +import it.inps.sirio.theme.sliderTextPaddingBottom +import it.inps.sirio.theme.sliderTitlePaddingBottom import it.inps.sirio.ui.text.SirioTextCommon import java.lang.Integer.min import kotlin.math.max diff --git a/design/src/main/java/it/inps/sirio/ui/tabbar/TabBar.kt b/design/src/main/java/it/inps/sirio/ui/tabbar/TabBar.kt index a7441be..ccf9d4f 100644 --- a/design/src/main/java/it/inps/sirio/ui/tabbar/TabBar.kt +++ b/design/src/main/java/it/inps/sirio/ui/tabbar/TabBar.kt @@ -10,33 +10,40 @@ package it.inps.sirio.ui.tabbar import android.util.Log import androidx.compose.foundation.background -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.selection.selectable -import androidx.compose.material.* -import androidx.compose.material.ripple.rememberRipple +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.BadgedBox +import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.NavigationBar +import androidx.compose.material3.NavigationBarItem +import androidx.compose.material3.NavigationBarItemDefaults +import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue -import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.layout.* import androidx.compose.ui.platform.LocalConfiguration -import androidx.compose.ui.semantics.Role -import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.Constraints +import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.navigation.NavHostController import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController import com.guru.fontawesomecomposelib.FaIcons -import it.inps.sirio.theme.* +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.tabBarHeight +import it.inps.sirio.theme.tabBarItemIconSize +import it.inps.sirio.theme.tabBarItemStateIndicatorHeight import it.inps.sirio.ui.badge.SirioBadgeCommon import it.inps.sirio.ui.text.SirioTextCommon import it.inps.sirio.utils.SirioIcon -import kotlin.math.max /** * A bottom navigation with tabs @@ -48,13 +55,12 @@ import kotlin.math.max fun TabBar(items: List, navController: NavHostController) { //TabBar should contain 3-5 tabs assert(items.size in 3..5) - BottomNavigation( - backgroundColor = SirioTheme.colors.tabBarBackground, + NavigationBar( modifier = Modifier .fillMaxWidth() - .height(tabBarHeight) + .height(tabBarHeight.dp), + containerColor = SirioTheme.colors.tabBarBackground, ) { - // observe the backstack val navBackStackEntry by navController.currentBackStackEntryAsState() @@ -68,11 +74,8 @@ fun TabBar(items: List, navController: NavHostController) { items.take(5).forEach { tabItem -> val selected = currentRoute == tabItem.route - TabBarItem( - // it currentRoute is equal then its selected route + NavigationBarItem( selected = selected, - - // navigate on click onClick = { try { navController.navigate(tabItem.route) { @@ -92,215 +95,52 @@ fun TabBar(items: List, navController: NavHostController) { Log.e("TabBar", "TabBar: onclick exception ", e) } }, - - // Icon of tabItem icon = { - BadgedBox( - badge = { - if (tabItem.badge) { - SirioBadgeCommon() - } - }) { - SirioIcon( - faIcon = tabItem.icon, - size = tabBarItemIconSize, - iconColor = if (selected) SirioTheme.colors.tabBarActive else SirioTheme.colors.tabBarContent, + Column(horizontalAlignment = Alignment.CenterHorizontally) { + Box( + modifier = Modifier + .fillMaxWidth() + .height(tabBarItemStateIndicatorHeight.dp) + .background(if (selected) SirioTheme.colors.tabBarActive else SirioTheme.colors.tabBarBackground) ) + Spacer(modifier = Modifier.height(3.dp)) + BadgedBox( + badge = { + if (tabItem.badge) { + SirioBadgeCommon() + } + }, + ) { + SirioIcon( + faIcon = tabItem.icon, + size = tabBarItemIconSize.dp, + iconColor = LocalContentColor.current + ) + } } }, - - // label label = { SirioTextCommon( text = tabItem.label, - color = if (selected) SirioTheme.colors.tabBarActive else SirioTheme.colors.tabBarContent, + color = LocalContentColor.current, maxLines = 1, typography = labelTypography, ) }, + colors = NavigationBarItemDefaults.colors( + selectedIconColor = SirioTheme.colors.tabBarActive, + selectedTextColor = SirioTheme.colors.tabBarActive, + indicatorColor = Color.Transparent, + unselectedIconColor = SirioTheme.colors.tabBarContent, + unselectedTextColor = SirioTheme.colors.tabBarContent, + ) ) } } } -/** - * A single tab component to be used in tab bar - * - * @param label A composable with the tab text - * @param icon A composable with the tab icon - * @param selected Whether the tab is the selected one - * @param onClick The tab click callback - * @param modifier The modifier is used only by other Sirio components - * @param enabled Whether the tab can be selected by user - * @param interactionSource The [MutableInteractionSource] to handle state changes - * @param selectedContentColor The ripple effect color - */ -@Composable -internal fun RowScope.TabBarItem( - label: @Composable (() -> Unit), - icon: @Composable () -> Unit, - selected: Boolean, - onClick: () -> Unit, - modifier: Modifier = Modifier, - enabled: Boolean = true, - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - selectedContentColor: Color = LocalContentColor.current, -) { - val styledLabel: @Composable (() -> Unit) = label.let { - @Composable { - val style = MaterialTheme.typography.caption.copy(textAlign = TextAlign.Center) - ProvideTextStyle(style, content = label) - } - } - // The color of the Ripple should always the selected color, as we want to show the color - // before the item is considered selected, and hence before the new contentColor is - // provided by BottomNavigationTransition. - val ripple = rememberRipple(bounded = false, color = selectedContentColor) - - Box( - modifier - .selectable( - selected = selected, - onClick = onClick, - enabled = enabled, - role = Role.Tab, - interactionSource = interactionSource, - indication = ripple - ) - .weight(1f), - contentAlignment = Alignment.Center - ) { - TabBarItemBaselineLayout( - icon = icon, - label = styledLabel, - selected = selected, - ) - } -} - -/** - * Sirio Tab item layout - * - * @param icon A composable with the tab icon - * @param label A composable with the tab text - * @param selected Whether the tab is the selected one - */ -@Composable -private fun TabBarItemBaselineLayout( - icon: @Composable () -> Unit, - label: @Composable (() -> Unit), - selected: Boolean, -) { -// val configuration = LocalConfiguration.current - Layout( - { - Box( - Modifier - .layoutId("state") - .height(tabBarItemStateIndicatorHeight) - .fillMaxWidth() - .background(if (selected) SirioTheme.colors.tabBarActive else SirioTheme.colors.tabBarBackground) - ) - Box(Modifier.layoutId("icon")) { icon() } - Box( - Modifier - .layoutId("label") - .padding(horizontal = tabBarItemHorizontalPadding) - ) { label() } - } - ) { measurables, constraints -> - val statePlaceable = measurables.first { it.layoutId == "state" }.measure(constraints) - - val iconPlaceable = measurables.first { it.layoutId == "icon" }.measure(constraints) - - val labelPlaceable = measurables.first { it.layoutId == "label" }.measure( - // Measure with loose constraints for height as we don't want the label to take up more - // space than it needs - constraints.copy(minHeight = 0) - ) - -// when (configuration.orientation) { -// Configuration.ORIENTATION_LANDSCAPE -> { -// tabBarItemPlaceLabelAndIconInRow( -// statePlaceable, -// labelPlaceable, -// iconPlaceable, -// constraints, -// ) -// } -// else -> { - tabBarItemPlaceLabelAndIconInColumn( - statePlaceable, - labelPlaceable, - iconPlaceable, - constraints, - ) - -// } -// } - - } -} - -/** - * Tab bar item layout in column for small screen devices - */ -private fun MeasureScope.tabBarItemPlaceLabelAndIconInColumn( - statePlaceable: Placeable, - labelPlaceable: Placeable, - iconPlaceable: Placeable, - constraints: Constraints, -): MeasureResult { - val containerHeight = constraints.maxHeight - val containerWidth = constraints.maxWidth - - val iconX = (containerWidth - iconPlaceable.width) / 2 - val iconY = tabBarItemVerticalPadding.roundToPx() - - val labelX = (containerWidth - labelPlaceable.width) / 2 - val labelY = iconY + iconPlaceable.height - - return layout(containerWidth, containerHeight) { - statePlaceable.placeRelative(0, 0) - iconPlaceable.placeRelative(iconX, iconY) - labelPlaceable.placeRelative(labelX, labelY) - } -} - -/** - * Tab bar item layout in row for large screen devices - */ -private fun MeasureScope.tabBarItemPlaceLabelAndIconInRow( - statePlaceable: Placeable, - labelPlaceable: Placeable, - iconPlaceable: Placeable, - constraints: Constraints, -): MeasureResult { - val containerHeight = constraints.maxHeight - val containerWidth = constraints.maxWidth - - val contentWidth = iconPlaceable.width + labelPlaceable.width - val iconX = max( - (containerWidth - contentWidth) / 2, - tabBarItemHorizontalPadding.roundToPx() - ) - val iconY = (containerHeight - iconPlaceable.height) / 2 - - //Eliminate the padding between label and icon - //Add 1 px to prevent overlap due to round - val labelX = - iconX + iconPlaceable.width - tabBarItemHorizontalPadding.roundToPx() + 1 - val labelY = (containerHeight - labelPlaceable.height) / 2 - - return layout(containerWidth, containerHeight) { - statePlaceable.placeRelative(0, 0) - iconPlaceable.placeRelative(iconX, iconY) - labelPlaceable.placeRelative(labelX, labelY) - } -} - - @Preview(showSystemUi = true) +@Preview(showSystemUi = true, device = Devices.NEXUS_10) @Composable private fun TabBarPreview() { SirioTheme { @@ -336,7 +176,7 @@ private fun TabBarPreview() { label = "Servizi", icon = FaIcons.GripHorizontal, route = "InpsScreen.ServiziScreen.route", - badge = false, + badge = true, ) ), navController = rememberNavController() @@ -351,4 +191,4 @@ private fun TabBarPreview() { } } } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/tabs/SirioTabCommon.kt b/design/src/main/java/it/inps/sirio/ui/tabs/SirioTabCommon.kt index 2f5f9b2..b45915a 100644 --- a/design/src/main/java/it/inps/sirio/ui/tabs/SirioTabCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/tabs/SirioTabCommon.kt @@ -130,16 +130,6 @@ internal fun SirioTabCommon( } } -@Composable -private fun TabSelectionIndicator(color: Color) { - Box( - modifier = Modifier - .fillMaxWidth() - .height(tabIndicatorHeight) - .background(color = color) - ) -} - /** * Tab colors based on current state */ @@ -190,14 +180,14 @@ data class TabsParams( @Keep data class SirioTabsColors( - var backgroundBottomSelection: Color, - var backgroundTopSelection: Color, - var backgroundSelected: Color, - var backgroundBottomSelectionDisabled: Color, - var backgroundTopSelectionDisabled: Color, - var text: SirioColorState, - var icon: SirioColorState, - var selection: SirioColorState, + val backgroundBottomSelection: Color, + val backgroundTopSelection: Color, + val backgroundSelected: Color, + val backgroundBottomSelectionDisabled: Color, + val backgroundTopSelectionDisabled: Color, + val text: SirioColorState, + val icon: SirioColorState, + val selection: SirioColorState, ) { companion object { @Stable diff --git a/design/src/main/java/it/inps/sirio/ui/tag/SmallTag.kt b/design/src/main/java/it/inps/sirio/ui/tag/SirioTag.kt similarity index 74% rename from design/src/main/java/it/inps/sirio/ui/tag/SmallTag.kt rename to design/src/main/java/it/inps/sirio/ui/tag/SirioTag.kt index 6a900d0..02d0166 100644 --- a/design/src/main/java/it/inps/sirio/ui/tag/SmallTag.kt +++ b/design/src/main/java/it/inps/sirio/ui/tag/SirioTag.kt @@ -1,5 +1,5 @@ // -// SmallTag.kt +// SirioTag.kt // // SPDX-FileCopyrightText: 2024 Istituto Nazionale Previdenza Sociale // @@ -22,7 +22,7 @@ import it.inps.sirio.theme.SirioTheme * @param modifier A [Modifier] for customizing the appearance and behavior of the tag component */ @Composable -fun SmallTag( +fun SirioTag( text: String, tagType: TagType, modifier: Modifier = Modifier, @@ -35,7 +35,7 @@ fun SmallTag( TagType.GREEN -> SirioTheme.colors.tag.green TagType.WHITE -> SirioTheme.colors.tag.white } - TagCommon( + SirioTagCommon( text = text, colors = sirioTagColors, modifier = modifier, @@ -47,12 +47,12 @@ fun SmallTag( private fun SmallTagPreview() { SirioTheme { Column { - SmallTag(text = "Label Tag", tagType = TagType.GRAY) - SmallTag(text = "Label Tag", tagType = TagType.BLUE) - SmallTag(text = "Label Tag", tagType = TagType.RED) - SmallTag(text = "Label Tag", tagType = TagType.ORANGE) - SmallTag(text = "Label Tag", tagType = TagType.GREEN) - SmallTag(text = "Label Tag", tagType = TagType.WHITE) + SirioTag(text = "Label Tag", tagType = TagType.GRAY) + SirioTag(text = "Label Tag", tagType = TagType.BLUE) + SirioTag(text = "Label Tag", tagType = TagType.RED) + SirioTag(text = "Label Tag", tagType = TagType.ORANGE) + SirioTag(text = "Label Tag", tagType = TagType.GREEN) + SirioTag(text = "Label Tag", tagType = TagType.WHITE) } } } \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/ui/tag/TagCommon.kt b/design/src/main/java/it/inps/sirio/ui/tag/SirioTagCommon.kt similarity index 71% rename from design/src/main/java/it/inps/sirio/ui/tag/TagCommon.kt rename to design/src/main/java/it/inps/sirio/ui/tag/SirioTagCommon.kt index 6dccd58..f292685 100644 --- a/design/src/main/java/it/inps/sirio/ui/tag/TagCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/tag/SirioTagCommon.kt @@ -10,19 +10,22 @@ package it.inps.sirio.ui.tag import androidx.annotation.Keep import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.Surface +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import it.inps.sirio.theme.SirioTheme import it.inps.sirio.theme.tagElevation -import it.inps.sirio.theme.tagHorizontalPadding -import it.inps.sirio.theme.tagVerticalPadding +import it.inps.sirio.theme.tagHeight +import it.inps.sirio.theme.tagPaddingHorizontal import it.inps.sirio.ui.text.SirioTextCommon /** @@ -33,24 +36,27 @@ import it.inps.sirio.ui.text.SirioTextCommon * @param modifier A [Modifier] for customizing the appearance and behavior of the tag component */ @Composable -internal fun TagCommon( +internal fun SirioTagCommon( text: String, colors: SirioTagColors, modifier: Modifier = Modifier, ) { Surface( modifier = modifier, - elevation = tagElevation, shape = CircleShape, - color = colors.background + color = colors.background, + shadowElevation = tagElevation.dp, ) { Row( - modifier = Modifier.padding(tagHorizontalPadding, tagVerticalPadding), + modifier = Modifier + .height(tagHeight.dp) + .padding(horizontal = tagPaddingHorizontal.dp), verticalAlignment = Alignment.CenterVertically ) { SirioTextCommon( text = text, color = colors.text, + overflow = TextOverflow.Ellipsis, typography = SirioTheme.typography.tagText, ) } @@ -59,12 +65,12 @@ internal fun TagCommon( @Keep data class SirioTagsColors( - var gray: SirioTagColors, - var blue: SirioTagColors, - var red: SirioTagColors, - var orange: SirioTagColors, - var green: SirioTagColors, - var white: SirioTagColors, + val gray: SirioTagColors, + val blue: SirioTagColors, + val red: SirioTagColors, + val orange: SirioTagColors, + val green: SirioTagColors, + val white: SirioTagColors, ) { companion object { @Stable @@ -81,8 +87,8 @@ data class SirioTagsColors( @Keep data class SirioTagColors( - var background: Color, - var text: Color, + val background: Color, + val text: Color, ) { companion object { @Stable @@ -97,7 +103,7 @@ data class SirioTagColors( @Composable private fun TagCommonPreview() { SirioTheme { - TagCommon("Label Tag", SirioTheme.colors.tag.red) + SirioTagCommon("Label Tag", SirioTheme.colors.tag.red) } } diff --git a/design/src/main/java/it/inps/sirio/ui/text/SirioTextCommon.kt b/design/src/main/java/it/inps/sirio/ui/text/SirioTextCommon.kt index c0afb2e..526166f 100644 --- a/design/src/main/java/it/inps/sirio/ui/text/SirioTextCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/text/SirioTextCommon.kt @@ -48,7 +48,7 @@ internal fun SirioTextCommon( ) { Text( text = text, - modifier = modifier.offset(y = (-2).dp), + modifier = modifier, color = color, textDecoration = textDecoration, textAlign = textAlign, @@ -99,4 +99,4 @@ fun SirioTextCommonPreview() { SirioTheme { SirioTextCommon(text = "Testo", typography = SirioTheme.typography.textFieldText) } -} \ No newline at end of file +} diff --git a/design/src/main/java/it/inps/sirio/ui/textarea/SirioTextArea.kt b/design/src/main/java/it/inps/sirio/ui/textarea/SirioTextArea.kt new file mode 100644 index 0000000..f00daab --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/textarea/SirioTextArea.kt @@ -0,0 +1,126 @@ +// +// SirioTextArea.kt +// +// SPDX-FileCopyrightText: 2024 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// + +package it.inps.sirio.ui.textarea + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.foundation.verticalScroll +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import it.inps.sirio.theme.SirioTheme + +/** + * Sirio text area component + * + * @param text The current text area text + * @param onValueChange The callback on text changed + * @param placeholder The string in text area when [text] is empty + * @param label The optional text on top of text area + * @param onInfoClick The optional callback on info icon click + * @param infoContentDescription The content description for the info icon + * @param helperText The optional text on bottom of text area + * @param type The semantic [TextAreaSemantic] of text area + * @param enabled Whether the text area can be edited by user + * @param keyboardOptions software keyboard options that contains configuration such as [KeyboardType] and [ImeAction]. + * @param keyboardActions when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in [KeyboardOptions.imeAction]. + * @param onIconClick The callback on icon click + * @param onTextAreaClick The callback on text area click + */ +@Composable +fun SirioTextArea( + text: String, + onValueChange: (String) -> Unit, + placeholder: String? = null, + label: String? = null, + onInfoClick: (() -> Unit)? = null, + infoContentDescription: String? = null, + helperText: String? = null, + type: TextAreaSemantic? = null, + enabled: Boolean = true, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + onIconClick: (() -> Unit)? = null, + onTextAreaClick: (() -> Unit)? = null, +) { + SirioTextAreaCommon( + text = text, + onValueChange = onValueChange, + placeholder = placeholder, + label = label, + onInfoClick = onInfoClick, + infoContentDescription = infoContentDescription, + helperText = helperText, + type = type, + enabled = enabled, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + onIconClick = onIconClick, + onTextAreaClick = onTextAreaClick, + ) +} + +@Preview(showSystemUi = true) +@Composable +private fun TextAreaPreview() { + SirioTheme { + Column( + Modifier + .fillMaxSize() + .background(Color(0xFFE5E5E5)) + .verticalScroll(rememberScrollState()) + .padding(vertical = 10.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + SirioTextArea( + text = "Text", + placeholder = "Placeholder", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = {}, + ) + SirioTextArea( + text = "Text", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = null, + type = TextAreaSemantic.ALERT, + ) + SirioTextArea( + text = "Text", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = {}, + type = TextAreaSemantic.SUCCESS, + ) + SirioTextArea( + text = "Text", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = {}, + enabled = false, + type = TextAreaSemantic.SUCCESS + ) + } + } +} \ No newline at end of file diff --git a/design/src/main/java/it/inps/sirio/ui/textarea/SirioTextAreaCommon.kt b/design/src/main/java/it/inps/sirio/ui/textarea/SirioTextAreaCommon.kt new file mode 100644 index 0000000..4c18007 --- /dev/null +++ b/design/src/main/java/it/inps/sirio/ui/textarea/SirioTextAreaCommon.kt @@ -0,0 +1,467 @@ +// +// SirioTextAreaCommon.kt +// +// SPDX-FileCopyrightText: 2024 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// + +package it.inps.sirio.ui.textarea + + +import androidx.annotation.Keep +import androidx.compose.foundation.LocalIndication +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsFocusedAsState +import androidx.compose.foundation.interaction.collectIsHoveredAsState +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.IconButton +import androidx.compose.material3.OutlinedTextFieldDefaults +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.text.input.VisualTransformation +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.guru.fontawesomecomposelib.FaIconType +import com.guru.fontawesomecomposelib.FaIcons +import it.inps.sirio.theme.Shapes +import it.inps.sirio.theme.SirioColorState +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.textAreaBorderWidth +import it.inps.sirio.theme.textAreaDefaultHeight +import it.inps.sirio.theme.textAreaFocusedBorderPadding +import it.inps.sirio.theme.textAreaFocusedExtraBorderWidth +import it.inps.sirio.theme.textAreaIconSize +import it.inps.sirio.theme.textAreaIconTopPadding +import it.inps.sirio.theme.textAreaInfoIconSize +import it.inps.sirio.theme.textAreaLabelVerticalPadding +import it.inps.sirio.theme.textAreaPaddingBottom +import it.inps.sirio.ui.text.SirioTextCommon +import it.inps.sirio.utils.SirioIcon + +/** + * Sirio text area common implementation + * + * @param text The current text area text + * @param onValueChange The callback on text changed + * @param placeholder The string in text area when [text] is empty + * @param label The optional text on top of text area + * @param onInfoClick The optional callback on info icon click + * @param infoContentDescription The content description for the info icon + * @param helperText The optional text on bottom of text area + * @param type The semantic [TextAreaSemantic] of text area + * @param enabled Whether the text area can be edited by user + * @param keyboardOptions software keyboard options that contains configuration such as [KeyboardType] and [ImeAction]. + * @param keyboardActions when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in [KeyboardOptions.imeAction]. + * @param onIconClick The callback on icon click + * @param onTextAreaClick The callback on text area click used to handle custom input. If the callback is provided the text area is disabled to allow the action, normal behaviour otherwise + */ +@OptIn(ExperimentalMaterial3Api::class) +@Composable +internal fun SirioTextAreaCommon( + text: String = "", + onValueChange: (String) -> Unit, + placeholder: String? = null, + label: String? = null, + onInfoClick: (() -> Unit)? = null, + infoContentDescription: String? = null, + helperText: String? = null, + type: TextAreaSemantic? = null, + enabled: Boolean = true, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + onIconClick: (() -> Unit)? = null, + onTextAreaClick: (() -> Unit)? = null, +) { + val interactionSource = remember { MutableInteractionSource() } + val isPressed by interactionSource.collectIsPressedAsState() + val isFocused by interactionSource.collectIsFocusedAsState() + val isHovered by interactionSource.collectIsHoveredAsState() + + val textAreaParams = getTextAreaParams(enabled, type, isFocused, isPressed, isHovered) + + Column { + label?.let { + Row(Modifier.wrapContentSize(), verticalAlignment = Alignment.CenterVertically) { + SirioTextCommon( + text = it, + color = textAreaParams.labelColor, + typography = SirioTheme.typography.textAreaLabel, + ) + onInfoClick?.let { itc -> + IconButton(onClick = itc) { + SirioIcon( + faIcon = FaIcons.InfoCircle, + size = textAreaInfoIconSize, + iconColor = textAreaParams.infoIconColor, + contentDescription = infoContentDescription, + ) + } + } + } + if (onInfoClick == null) Spacer(modifier = Modifier.height(textAreaLabelVerticalPadding)) + } + Box( + modifier = if (type == null && isFocused) { + Modifier + .border( + width = textAreaFocusedExtraBorderWidth, + color = SirioTheme.colors.textArea.extraBorder, + shape = Shapes.small, + ) + .padding(textAreaFocusedBorderPadding) + } else Modifier.padding(0.dp), + contentAlignment = Alignment.TopCenter + ) { + val colors = OutlinedTextFieldDefaults.colors( + focusedTextColor = textAreaParams.textColor, + unfocusedTextColor = textAreaParams.textColor, + disabledTextColor = textAreaParams.textColor, + focusedContainerColor = textAreaParams.backgroundColor, + unfocusedContainerColor = textAreaParams.backgroundColor, + cursorColor = textAreaParams.textColor, + focusedBorderColor = textAreaParams.borderColor, + unfocusedBorderColor = textAreaParams.borderColor, + disabledBorderColor = textAreaParams.borderColor, + errorBorderColor = textAreaParams.borderColor, + unfocusedTrailingIconColor = textAreaParams.iconColor, + disabledTrailingIconColor = textAreaParams.iconColor, + errorTrailingIconColor = textAreaParams.iconColor, + focusedTrailingIconColor = textAreaParams.iconColor, + focusedPlaceholderColor = textAreaParams.placeholderTextColor, + unfocusedPlaceholderColor = textAreaParams.placeholderTextColor, + disabledPlaceholderColor = textAreaParams.placeholderTextColor, + ) + + val clickable = + if (onTextAreaClick != null) { + Modifier + .clickable( + interactionSource = interactionSource, + indication = LocalIndication.current, + onClick = onTextAreaClick, + ) + } else { + Modifier + } + BasicTextField( + value = text, + onValueChange = onValueChange, + modifier = Modifier + .fillMaxWidth() + .defaultMinSize( + minWidth = TextFieldDefaults.MinWidth, + minHeight = TextFieldDefaults.MinHeight, + ) + .height(textAreaDefaultHeight) + .then(clickable), + enabled = enabled && onTextAreaClick == null, + readOnly = onTextAreaClick != null, + textStyle = SirioTheme.typography.textAreaText.merge(TextStyle(color = textAreaParams.textColor)), + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + singleLine = false, + visualTransformation = VisualTransformation.None, + cursorBrush = SolidColor(textAreaParams.textColor), + interactionSource = interactionSource, + decorationBox = @Composable { innerTextField -> + OutlinedTextFieldDefaults.DecorationBox( + value = text, + innerTextField = innerTextField, + enabled = enabled, + singleLine = false, + visualTransformation = VisualTransformation.None, + interactionSource = interactionSource, + placeholder = { + placeholder?.let { + SirioTextCommon( + text = it, + color = textAreaParams.placeholderTextColor, + typography = SirioTheme.typography.textAreaPlaceholder, + ) + } + }, + trailingIcon = type?.getIcon()?.let { + { + Box( + modifier = Modifier + .fillMaxHeight() + .padding(top = textAreaIconTopPadding), + contentAlignment = Alignment.TopCenter, + ) { + IconButton( + onClick = onIconClick ?: {}, + enabled = enabled + ) { + SirioIcon( + faIcon = it, + size = textAreaIconSize, + iconColor = textAreaParams.iconColor, + ) + } + } + } + }, + colors = colors, + contentPadding = OutlinedTextFieldDefaults.contentPadding(), + container = { + OutlinedTextFieldDefaults.ContainerBox( + enabled = enabled, + isError = false, + interactionSource = interactionSource, + colors = colors, + shape = Shapes.small, + focusedBorderThickness = textAreaBorderWidth, + unfocusedBorderThickness = textAreaBorderWidth, + ) + }, + ) + }, + ) + } + Spacer(modifier = Modifier.height(textAreaPaddingBottom)) + helperText?.let { + SirioTextCommon( + text = it, + color = textAreaParams.helperTextColor, + typography = SirioTheme.typography.textAreaHelperText, + ) + } + } +} + +/** + * @return The text field color based on its status + */ +@Composable +private fun getTextAreaParams( + enabled: Boolean, + type: TextAreaSemantic?, + isFocused: Boolean, + isPressed: Boolean, + isHovered: Boolean, +): TextAreaParams = when { + !enabled -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.disabled, + infoIconColor = SirioTheme.colors.textArea.label.disabled, + labelColor = SirioTheme.colors.textArea.label.disabled, + helperTextColor = SirioTheme.colors.textArea.helperText.disabled, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.disabled, + textColor = SirioTheme.colors.textArea.text.disabled, + iconColor = SirioTheme.colors.textArea.icon.disabled, + borderColor = SirioTheme.colors.textArea.border.disabled, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.disabled, + ) + + type == TextAreaSemantic.ALERT -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.alert, + infoIconColor = SirioTheme.colors.textArea.label.alert, + labelColor = SirioTheme.colors.textArea.label.alert, + helperTextColor = SirioTheme.colors.textArea.helperText.alert, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.alert, + textColor = SirioTheme.colors.textArea.text.alert, + iconColor = SirioTheme.colors.textArea.icon.alert, + borderColor = SirioTheme.colors.textArea.border.alert, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.alert, + ) + + type == TextAreaSemantic.SUCCESS -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.success, + infoIconColor = SirioTheme.colors.textArea.label.success, + labelColor = SirioTheme.colors.textArea.label.success, + helperTextColor = SirioTheme.colors.textArea.helperText.success, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.success, + textColor = SirioTheme.colors.textArea.text.success, + iconColor = SirioTheme.colors.textArea.icon.success, + borderColor = SirioTheme.colors.textArea.border.success, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.success, + ) + + isFocused -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.focused, + infoIconColor = SirioTheme.colors.textArea.label.focused, + labelColor = SirioTheme.colors.textArea.label.focused, + helperTextColor = SirioTheme.colors.textArea.helperText.focused, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.focused, + textColor = SirioTheme.colors.textArea.text.focused, + iconColor = SirioTheme.colors.textArea.icon.focused, + borderColor = SirioTheme.colors.textArea.border.focused, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.focused, + ) + + isPressed -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.pressed, + infoIconColor = SirioTheme.colors.textArea.label.pressed, + labelColor = SirioTheme.colors.textArea.label.pressed, + helperTextColor = SirioTheme.colors.textArea.helperText.pressed, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.pressed, + textColor = SirioTheme.colors.textArea.text.pressed, + iconColor = SirioTheme.colors.textArea.icon.pressed, + borderColor = SirioTheme.colors.textArea.border.pressed, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.pressed, + ) + + isHovered -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.hovered, + infoIconColor = SirioTheme.colors.textArea.label.hovered, + labelColor = SirioTheme.colors.textArea.label.hovered, + helperTextColor = SirioTheme.colors.textArea.helperText.hovered, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.hovered, + textColor = SirioTheme.colors.textArea.text.hovered, + iconColor = SirioTheme.colors.textArea.icon.hovered, + borderColor = SirioTheme.colors.textArea.border.hovered, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.hovered, + ) + + else -> TextAreaParams( + backgroundColor = SirioTheme.colors.textArea.background.default, + infoIconColor = SirioTheme.colors.textArea.label.hovered, + labelColor = SirioTheme.colors.textArea.label.default, + helperTextColor = SirioTheme.colors.textArea.helperText.default, + placeholderTextColor = SirioTheme.colors.textArea.placeholder.default, + textColor = SirioTheme.colors.textArea.text.default, + iconColor = SirioTheme.colors.textArea.icon.default, + borderColor = SirioTheme.colors.textArea.border.default, + dropdownBorderColor = SirioTheme.colors.textArea.dropdown.default, + ) +} + +@Keep +data class TextAreaParams( + val backgroundColor: Color, + val infoIconColor: Color, + val labelColor: Color, + val helperTextColor: Color, + val textColor: Color, + val placeholderTextColor: Color, + val iconColor: Color, + val borderColor: Color, + val dropdownBorderColor: Color, +) + +@Keep +data class SirioTextAreaColors( + val background: SirioColorState, + val border: SirioColorState, + val label: SirioColorState, + val icon: SirioColorState, + val helperText: SirioColorState, + val placeholder: SirioColorState, + val text: SirioColorState, + val dropdown: SirioColorState, + val optionBackground: SirioColorState, + val optionText: SirioColorState, + val extraBorder: Color, +) { + companion object { + @Stable + val Unspecified = SirioTextAreaColors( + background = SirioColorState.Unspecified, + border = SirioColorState.Unspecified, + label = SirioColorState.Unspecified, + icon = SirioColorState.Unspecified, + helperText = SirioColorState.Unspecified, + placeholder = SirioColorState.Unspecified, + text = SirioColorState.Unspecified, + dropdown = SirioColorState.Unspecified, + optionBackground = SirioColorState.Unspecified, + optionText = SirioColorState.Unspecified, + extraBorder = Color.Unspecified, + ) + } +} + +enum class TextAreaSemantic { + ALERT { + override fun getIcon(): FaIconType { + return FaIcons.ExclamationTriangle + } + }, + SUCCESS { + override fun getIcon(): FaIconType { + return FaIcons.Check + } + }; + + abstract fun getIcon(): FaIconType +} + +@Preview(showSystemUi = true) +@Composable +private fun TextAreaCommonPreview() { + SirioTheme { + Column( + Modifier + .fillMaxSize() + .background(Color(0xFFE5E5E5)) + .verticalScroll(rememberScrollState()) + .padding(vertical = 10.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + SirioTextAreaCommon( + text = "Text", + placeholder = "Placeholder", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = {}, + ) + SirioTextAreaCommon( + text = "Text", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = null, + type = TextAreaSemantic.ALERT, + ) + SirioTextAreaCommon( + text = "Text", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = {}, + type = TextAreaSemantic.SUCCESS, + ) + SirioTextAreaCommon( + text = "Text", + onValueChange = { }, + label = "Label", + helperText = "*Helper text", + onInfoClick = {}, + enabled = false, + type = TextAreaSemantic.SUCCESS + ) + } + } +} diff --git a/design/src/main/java/it/inps/sirio/ui/textfield/SirioTextFieldCommon.kt b/design/src/main/java/it/inps/sirio/ui/textfield/SirioTextFieldCommon.kt index d9ec5dc..7a1c0aa 100644 --- a/design/src/main/java/it/inps/sirio/ui/textfield/SirioTextFieldCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/textfield/SirioTextFieldCommon.kt @@ -93,7 +93,7 @@ import it.inps.sirio.utils.SirioIcon * @param label The optional text on top of text field * @param onInfoClick The optional callback on info icon click * @param infoContentDescription The content description for the info icon - * @param helperText The optionl text on bottom of text field + * @param helperText The optional text on bottom of text field * @param optionValues An array of string as hints for user * @param onOptionValueSelected The callback when user select an option value from [optionValues] * @param type The semantic [TextFieldSemantic] of text field diff --git a/design/src/main/java/it/inps/sirio/ui/toggle/SirioToggleCommon.kt b/design/src/main/java/it/inps/sirio/ui/toggle/SirioToggleCommon.kt index db8e653..18ff4de 100644 --- a/design/src/main/java/it/inps/sirio/ui/toggle/SirioToggleCommon.kt +++ b/design/src/main/java/it/inps/sirio/ui/toggle/SirioToggleCommon.kt @@ -8,7 +8,7 @@ package it.inps.sirio.ui.toggle -import androidx.compose.animation.core.Animatable as AnimatableF +import androidx.annotation.Keep import androidx.compose.animation.Animatable import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background @@ -17,21 +17,46 @@ import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.collectIsFocusedAsState import androidx.compose.foundation.interaction.collectIsHoveredAsState import androidx.compose.foundation.interaction.collectIsPressedAsState -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.requiredSize +import androidx.compose.foundation.layout.width import androidx.compose.foundation.selection.toggleable import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.Surface -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.Stable +import androidx.compose.runtime.derivedStateOf +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.semantics.Role +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp -import it.inps.sirio.theme.* +import it.inps.sirio.theme.SirioColorState +import it.inps.sirio.theme.SirioTheme +import it.inps.sirio.theme.toggleBorderWidth +import it.inps.sirio.theme.toggleFocusExtraBorderPadding +import it.inps.sirio.theme.toggleFocusExtraBorderWidth +import it.inps.sirio.theme.toggleHeight +import it.inps.sirio.theme.toggleIndicatorHorizontalOffset +import it.inps.sirio.theme.toggleIndicatorSize +import it.inps.sirio.theme.toggleSafeAreaPadding +import it.inps.sirio.theme.toggleWidth import it.inps.sirio.ui.text.SirioTextCommon +import androidx.compose.animation.core.Animatable as AnimatableF /** * Sirio toggle implementation @@ -54,13 +79,18 @@ internal fun SirioToggleCommon( val isHovered by interactionSource.collectIsHoveredAsState() Row(verticalAlignment = Alignment.CenterVertically) { - val borderColor = when { - !enabled -> SirioTheme.colors.toggleDisabledBorder - isFocused -> if (isOn) SirioTheme.colors.toggleFocusOn else SirioTheme.colors.toggleFocusOff - isHovered -> if (isOn) SirioTheme.colors.toggleHoverOn else SirioTheme.colors.toggleHoverOff - else -> if (isOn) SirioTheme.colors.toggleDefaultOn else SirioTheme.colors.toggleDefaultOff + val backgroundColor = + SirioTheme.colors.toggle.background.get(enabled.not(), isFocused, isPressed, isHovered) + val onColor = + SirioTheme.colors.toggle.on.get(enabled.not(), isFocused, isPressed, isHovered) + val offColor = + SirioTheme.colors.toggle.off.get(enabled.not(), isFocused, isPressed, isHovered) + val stateColor by remember(isOn, onColor, offColor) { + derivedStateOf { if (isOn) onColor else offColor } + } + val borderColor by remember(enabled, stateColor, backgroundColor) { + derivedStateOf { if (enabled) stateColor else backgroundColor } } - val contentColor = if (enabled) borderColor else SirioTheme.colors.toggleDisabled val offset: Float = with(LocalDensity.current) { toggleIndicatorHorizontalOffset.dp.toPx() } @@ -73,7 +103,7 @@ internal fun SirioToggleCommon( modifier .border( toggleFocusExtraBorderWidth, - color = SirioTheme.colors.toggleFocusExtraBorder, + color = SirioTheme.colors.toggle.borderFocusExtra, shape = CircleShape, ) .padding(toggleFocusExtraBorderPadding) @@ -91,14 +121,14 @@ internal fun SirioToggleCommon( onValueChange = onToggleChange, ), shape = CircleShape, - color = SirioTheme.colors.toggleBackground, + color = backgroundColor, border = BorderStroke(width = toggleBorderWidth, color = borderColor) ) { val currentX = if (isOn) offset else -offset - val color = remember { Animatable(contentColor) } + val animatedColor = remember { Animatable(stateColor) } val xPos = remember { AnimatableF(currentX) } LaunchedEffect(isOn) { - color.animateTo(contentColor) + animatedColor.animateTo(stateColor) xPos.animateTo(currentX) } Box( @@ -107,20 +137,50 @@ internal fun SirioToggleCommon( .offset { IntOffset(xPos.value.toInt(), 0) } .requiredSize(toggleIndicatorSize) .clip(CircleShape) - .background(color.value) + .background(animatedColor.value) ) } } text?.let { SirioTextCommon( text = it, - color = contentColor, - typography = SirioTheme.typography.toggleLabelText, + color = stateColor, + typography = SirioTheme.typography.toggle.text, ) } } } +@Keep +data class SirioToggleColors( + val background: SirioColorState, + val borderFocusExtra: Color, + val off: SirioColorState, + val on: SirioColorState, +) { + companion object { + @Stable + val Unspecified = SirioToggleColors( + background = SirioColorState.Unspecified, + borderFocusExtra = Color.Unspecified, + on = SirioColorState.Unspecified, + off = SirioColorState.Unspecified, + ) + } +} + +@Keep +data class SirioToggleTypography( + val text: TextStyle, +) { + companion object { + @Stable + val Default = SirioToggleTypography( + text = TextStyle.Default, + ) + } +} + @Preview @Composable private fun ToggleCommonPreview() { @@ -128,6 +188,8 @@ private fun ToggleCommonPreview() { Column { SirioToggleCommon(text = "Title", isOn = false, onToggleChange = {}) SirioToggleCommon(text = "Title", isOn = true, onToggleChange = {}) + SirioToggleCommon(text = "Title", isOn = false, enabled = false, onToggleChange = {}) + SirioToggleCommon(text = "Title", isOn = true, enabled = false, onToggleChange = {}) } } } diff --git a/design/src/main/java/it/inps/sirio/utils/BorderModifier.kt b/design/src/main/java/it/inps/sirio/utils/BorderModifier.kt new file mode 100644 index 0000000..ebe95c4 --- /dev/null +++ b/design/src/main/java/it/inps/sirio/utils/BorderModifier.kt @@ -0,0 +1,123 @@ +// +// BorderModifier.kt +// +// SPDX-FileCopyrightText: 2022 Istituto Nazionale Previdenza Sociale +// +// SPDX-License-Identifier: BSD-3-Clause +// +package it.inps.sirio.utils + +import androidx.compose.runtime.Stable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.drawWithContent +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Path +import androidx.compose.ui.graphics.drawscope.DrawScope +import androidx.compose.ui.unit.Dp + +data class Border(val strokeWidth: Dp, val color: Color) + +@Stable +fun Modifier.border( + start: Border? = null, + top: Border? = null, + end: Border? = null, + bottom: Border? = null, +) = + drawWithContent { + drawContent() + start?.let { + drawStartBorder(it, shareTop = top != null, shareBottom = bottom != null) + } + top?.let { + drawTopBorder(it, shareStart = start != null, shareEnd = end != null) + } + end?.let { + drawEndBorder(it, shareTop = top != null, shareBottom = bottom != null) + } + bottom?.let { + drawBottomBorder(border = it, shareStart = start != null, shareEnd = end != null) + } + } + +private fun DrawScope.drawTopBorder( + border: Border, + shareStart: Boolean = true, + shareEnd: Boolean = true, +) { + val strokeWidthPx = border.strokeWidth.toPx() + if (strokeWidthPx == 0f) return + drawPath( + Path().apply { + moveTo(0f, 0f) + lineTo(if (shareStart) strokeWidthPx else 0f, strokeWidthPx) + val width = size.width + lineTo(if (shareEnd) width - strokeWidthPx else width, strokeWidthPx) + lineTo(width, 0f) + close() + }, + color = border.color + ) +} + +private fun DrawScope.drawBottomBorder( + border: Border, + shareStart: Boolean, + shareEnd: Boolean, +) { + val strokeWidthPx = border.strokeWidth.toPx() + if (strokeWidthPx == 0f) return + drawPath( + Path().apply { + val width = size.width + val height = size.height + moveTo(0f, height) + lineTo(if (shareStart) strokeWidthPx else 0f, height - strokeWidthPx) + lineTo(if (shareEnd) width - strokeWidthPx else width, height - strokeWidthPx) + lineTo(width, height) + close() + }, + color = border.color + ) +} + +private fun DrawScope.drawStartBorder( + border: Border, + shareTop: Boolean = true, + shareBottom: Boolean = true, +) { + val strokeWidthPx = border.strokeWidth.toPx() + if (strokeWidthPx == 0f) return + drawPath( + Path().apply { + moveTo(0f, 0f) + lineTo(strokeWidthPx, if (shareTop) strokeWidthPx else 0f) + val height = size.height + lineTo(strokeWidthPx, if (shareBottom) height - strokeWidthPx else height) + lineTo(0f, height) + close() + }, + color = border.color + ) +} + +private fun DrawScope.drawEndBorder( + border: Border, + shareTop: Boolean = true, + shareBottom: Boolean = true, +) { + val strokeWidthPx = border.strokeWidth.toPx() + if (strokeWidthPx == 0f) return + drawPath( + Path().apply { + val width = size.width + val height = size.height + moveTo(width, 0f) + lineTo(width - strokeWidthPx, if (shareTop) strokeWidthPx else 0f) + lineTo(width - strokeWidthPx, if (shareBottom) height - strokeWidthPx else height) + lineTo(width, height) + close() + }, + color = border.color + ) +} \ No newline at end of file diff --git a/design/src/main/res/values/themes.xml b/design/src/main/res/values/themes.xml index d190b1e..8cb502f 100644 --- a/design/src/main/res/values/themes.xml +++ b/design/src/main/res/values/themes.xml @@ -18,8 +18,4 @@ false true - - -