UI Kitten Button status color change with custom-theme

yemreeke commented 1 year ago

💬 Question

Hello, I'm using the UI Kitten button component . But I want to ask a question. I added custom-theme.json to my project.

While changing the color of the button component, we give the status prop "basic, primary, success, info, warning, danger or control" values, but I guess it uses color-primary-500 as this color.

  <Button status="primary" >Button 1</Button>  //-> working
  <Button status="primary-200" >Button 2</Button> //-> not working.

I want to use 100 200 300 400 500 600 700 800 colors in this json file. Is it possible ?

Examples are these values.

{
  "color-primary-100": "#D6E4FF",
  "color-primary-200": "#ADC8FF",
  "color-primary-300": "#84A9FF",
  "color-primary-400": "#6690FF",
  "color-primary-500": "#0066FF",
  "color-primary-600": "#254EDB",
  "color-primary-700": "#1939B7",
  "color-primary-800": "#102693",
  "color-primary-900": "#091A7A",
  "color-success-100": "#EFFBCF",
  "color-success-200": "#DCF8A1",
  "color-success-300": "#BDEA6F",
  "color-success-400": "#9CD649",
  "color-success-500": "#70BC17",
  "color-success-600": "#58A110",
  "color-success-700": "#42870B",
  "color-success-800": "#306D07",
  "color-success-900": "#225A04",
  "color-info-100": "#D9FFFD",
  "color-info-200": "#B4FDFF",
  "color-info-300": "#8EF4FF",
  "color-info-400": "#72E8FF",
  "color-info-500": "#44D3FF",
  "color-info-600": "#31A7DB",
  "color-info-700": "#227FB7",
  "color-info-800": "#155B93",
  "color-info-900": "#0D417A",
  "color-warning-100": "#FFF5D7",
  "color-warning-200": "#FFE9B0",
  "color-warning-300": "#FFDA88",
  "color-warning-400": "#FFCB6B",
  "color-warning-500": "#FFB33A",
  "color-warning-600": "#DB902A",
  "color-warning-700": "#B76F1D",
  "color-warning-800": "#935212",
  "color-warning-900": "#7A3D0B",
  "color-danger-100": "#FFE4D5",
  "color-danger-200": "#FFC2AB",
  "color-danger-300": "#FF9881",
  "color-danger-400": "#FF7161",
  "color-danger-500": "#FF312D",
  "color-danger-600": "#DB202D",
  "color-danger-700": "#B7162F",
  "color-danger-800": "#930E2E",
  "color-danger-900": "#7A082D"
}

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.2.0
@ui-kitten/components	5.3.1

alexey-yarmosh commented 11 months ago

Specific styles can be applied using useTheme: https://akveo.github.io/react-native-ui-kitten/docs/design-system/use-theme-variables#declare-custom-component

yemreeke commented 11 months ago

Specific styles can be applied using useTheme: https://akveo.github.io/react-native-ui-kitten/docs/design-system/use-theme-variables#declare-custom-component

I can change its style, but there is no dark color effect when I click it. This is what I want to do. Like using 10 colors instead of 5 main colors

akveo / react-native-ui-kitten

UI Kitten Button status color change with custom-theme #1748

💬 Question

UI Kitten and Eva version