How to use the @kiwicom/orbit-design-tokens.defaultTokens.colorTextAttention function in @kiwicom/orbit-design-tokens

);
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  label: {
    flex: 1,
    color: defaultTokens.colorTextAttention,
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
  },
  icon: {
    marginRight: 10,
  },
  picker: {
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0, // NOTE: This workaround is required because picker label cannot be currently styled on Android
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },
});

export default Picker;

alignItems: 'center',
  },
  counterUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    flex: 1,
    fontSize: parseInt(defaultTokens.fontSizeTextLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
  stepperNumber: {
    width: parseInt(defaultTokens.spaceXXXLarge, 10),
    textAlign: 'center',
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),
    color: defaultTokens.colorTextAttention,
  },
});

export default PassengersInputsLine;

alignItems: 'center',
    paddingTop: 4,
  },
  headerLeftContainer: {
    flexDirection: 'column',
    paddingStart: 16,
    android: {
      paddingStart: 40,
    },
    alignItems: Platform.OS === 'web' ? 'center' : 'stretch',
    flex: 1,
  },
  city: {
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    alignSelf: 'center',
  },
  date: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 8,
  },
  gradientOverlap: {
    position: 'absolute',

},
  inputContainerWarning: {
    backgroundColor: defaultTokens.backgroundAlertCritical,
    borderColor: defaultTokens.borderColorInputError,
    borderWidth: parseFloat(defaultTokens.borderWidthInput),
  },
  inputField: {
    flex: 1,
    width: '100%',
    height: '100%',
    padding: 0,
    web: {
      outline: 'none',
      color: defaultTokens.colorTextInput,
    },
    color: defaultTokens.colorTextAttention,
  },
  inputFieldDisabled: {
    color: defaultTokens.colorTextInputDisabled,
  },
  inputFieldSuccess: {
    color: defaultTokens.colorTextAlertSuccess,
  },
  inputFieldWarning: {
    color: defaultTokens.paletteRedNormalActive,
  },
  inputContainerBorderFocused: {
    web: {
      borderColor: defaultTokens.borderColorInputFocus,
      borderWidth: parseFloat(defaultTokens.borderWidthInputFocus),
    },
  },

},
  headerLeftcontainer: {
    flexDirection: 'column',
    paddingStart: 16,
  },
  departureCity: {
    fontWeight: 'bold',
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  arrivalCity: {
    fontWeight: 'bold',
    marginStart: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  radio: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  radioUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    fontSize: parseInt(defaultTokens.fontSizeButtonLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
});
export default SelectOption;

},
  },
  warningContainer: {
    borderColor: defaultTokens.paletteRedNormal,
  },
  icon: {
    marginEnd: 10,
  },
  label: {
    color: defaultTokens.paletteInkNormal,
    web: {
      color: defaultTokens.colorTextSecondary,
    },
  },
  value: {
    color: defaultTokens.colorTextAttention,
    web: {
      color: defaultTokens.paletteInkNormal,
      fontWeight: designTokens.fontWeightMedium,
    },
  },
});

citiesContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 3,
    paddingTop: 8,
  },
  headerLeftcontainer: {
    flexDirection: 'column',
    paddingStart: 16,
  },
  departureCity: {
    fontWeight: 'bold',
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  arrivalCity: {
    fontWeight: 'bold',
    marginStart: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  row: {
    flexDirection: 'row',

justifyContent: 'center',
  },
  counter: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceSmall, 10),
    flexDirection: 'row',
    alignItems: 'center',
  },
  counterUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    flex: 1,
    fontSize: parseInt(defaultTokens.fontSizeTextLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
  stepperNumber: {
    width: parseInt(defaultTokens.spaceXXXLarge, 10),
    textAlign: 'center',
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),
    color: defaultTokens.colorTextAttention,
  },
});

export default PassengersInputsLine;